offsetLeft, offsetTop以及postion().left , postion().top有神马区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
for test,回答标题：
offsetLeft是指当前元素的外边框到包含元素的内边框;
position().left是指当前元素的margin(不包含margin)到定位元素的border-box(不包含border,但是包含padding),即pdding-box;
都是从父级的padding-box开始的
</title>
<script src="http://zeptojs.com/zepto.js"></script>
</head>
<body>
<style type="text/css">
body {
border:20px solid #CCC;
margin:30px;
padding:10px;
background:#EEE;
position:relative;
}
#test {
width:800px;
height:600px;
margin:40px;
padding:20px;
border:5px solid #888;
background:#F60;
position:relative;
}
#test-div2{
width:200px;
background:#999;
border:#fff solid 10px;
padding:20px;
margin:30px; }
</style>
<div id="test"></div>
<div>
<pre>
//在火狐和chrome和IE浏览器上的offsetLeft都是当前元素的marginLeft + offsetParent的paddingLeft,但是有一种情况下chrome的结果和[IE|FF]不一致,
//那就是在offsetParent为body的情况下, 在chrome下offsetParent为body的话offsetLeft会算上body.borderWidth //通过zepto的el.position()获取的left和top值;
//这个是指从父级的contentBox到子元素的margin-box(没有包含margin);
$("#test-div2").position()
Object {top: 242, left: 20}
$("#test").position()
Object {top: 40, left: 40}
//因为是body,所以zepto计算的就有问题(好烂的解释方式),布局尽量清楚点,惹不起还怕躲不起吗么么哒;
$("body").position()
Object {top: -20, left: -20}; //难懂的东西自己去写就好懂了，要么看了看了越看越晕的;
知识点:通过zepto获取的 position() 返回的LEFT和TOP是相对父级元素的LEFT和TOP的值 .这个值是通过 getBoundingClientRect 的差值(父级的border + 父级的padding + 中间的各种宽度么么哒 + 子元素的margin) 减去 - 父级的border - 子元素的maring (符合一个元素的left或者是top是父级元素的content-box 到子元素的margin的距离);
知识点：getBoundingClientRect()获取的也是相对界面的值,jQ和zepto的position实现就是根据getBoundingClientRect(),getBoundingClientRect是从元素的border-box开始的(包含border-box)到界面左上角的距离;
知识点：chrome的开发者工作的实时查看margin,border,padding,content调试的颜色是从浅入深的;
{
margin : 橘色,
border : 灰色,
padding : 褐色,
content : 偏蓝色
}
火狐
{
margin : 黄色,
border : 偏黑色,
padding : 紫色,
content : 偏蓝色
}
</pre>
</div>
<div></div>
<script>
window.onload = function() {
var test = document.getElementById("test");
test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
"<p>offsetWidth:" + test.offsetWidth + "</p>" +
"<p>offsetHeight:"+test.offsetHeight+"</p>"+
"<p>offsetLeft:"+test.offsetLeft+"</p>"+
"<p>offsetTop:"+test.offsetTop+"</p>"+
"<br><div id=\"test-div2\"></div>";
//在父元素是body的情况下;
//chrome下的:
//offsetLeft为 : 子元素的margin-left + body.borderLeft + body.paddingLeft
//ff下得 :
//offsetLeft为 ： 子元素的margin-left + body.paddingLeft
/*
在IE8/9/10及Chrome中,offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left);
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)
*/
var div2 = document.getElementById("test-div2");
div2.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
"<p>"+div2.offsetParent.tagName+"</p>"+
"<p>offsetWidth:" + div2.offsetWidth + "</p>" +
"<p>offsetHeight:"+div2.offsetHeight+"</p>"+
"<p>offsetLeft:"+div2.offsetLeft+"</p>"+
"<div style='left:200px;top:200px' id='div3'>div</div>";
//在父元素不是body的情况下;
//chrome下得 :
//offsetLeft也为的margin-left(包含margin-left)到相对父级的padding-left(包含padding-left);
//CODE用代码表示 ==〉〉 offsetLeft = offset.margin-left + el.padding-left
//ff下得 :
//offsetLeft为当前元素的margin-left(包含margin-left)到相对父级的padding-left(包含padding-left);
//CODE用代码表示 ==〉〉offsetLeft = offset.margin-left + el.padding-left
};
</script>
</body>
</html>
网页可见区域宽： W3C标准:document.documentElement.clientWidth ; IE低版本:document.body.clientWidth;
(
PS： document.documentElement.clientWidth是指不包含滚动条的宽度,
window.innerWidth是包含滚动条长度的用户宽度,
window.outerWidth是指window.innerWidth加上包含外部边框的长度;
如果一个元素出现了垂直滚动条,那么这个元素的clientHeight还是offsetHeight-border*2, 只有父级的clientHeight才是可视区的高度;
如果该元素隐藏了,就什么值都获取不到了;
)
网页可见区域高： W3C标准:document.documentElement.clientHeight ; IE低版本:document.body.clientHeight;
(PS： 因为现代浏览器的html为用户界面, body元素是一个正常的元素, 滚动时出现在html元素的,
在IE低版本下面的html是隐藏的,body是出现滚动的元素);
网页可见区域宽： W3C标准:document.body.offsetWidth (包括border和padding的宽);
知识点==>> W3C标准:offsetWidth === contentWidth(内容宽) + border-width*2 + padding-width*2;
网页可见区域高： 同上;
W3C标准下的width === 内容区域的宽;
IEquirk模式width === 包含paddingw和border的宽度;
用户高度: clientHeight不包含margin和border的高度, 即为padding值加上content-height;
clientLeft: 其实这个就是border-left的长度, 跟margin居然没有关系,感觉没有存在的意义(WEBKIT测试结果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算后样式</title>
</head>
<body> <style type="text/css">
body {
border:20px solid #CCC;
margin:30px;
padding:10px;
background:#EEE;
position:relative;
}
#test {
width:800px;
height:600px;
margin:40px;
padding:20px;
border:5px solid #888;
background:#F60;
position:relative;
}
#test-div2{
width:200px;
background:#999;
border:#fff solid 10px;
padding:20px;
margin:30px; }
</style>
<div id="test"></div>
<script> window.onload = function() {
var test = document.getElementById("test");
test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
"<p>offsetWidth:" + test.offsetWidth + "</p>" +
"<p>offsetHeight:"+test.offsetHeight+"</p>"+
"<p>offsetLeft:"+test.offsetLeft+"</p>"+
"<p>offsetTop:"+test.offsetTop+"</p>"+
"<br><div id=\"test-div2\"></div>";
var div2 = document.getElementById("test-div2");
div2.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
"<p>"+div2.offsetParent.tagName+"</p>"+
"<p>offsetWidth:" + div2.offsetWidth + "</p>" +
"<p>offsetHeight:"+div2.offsetHeight+"</p>"+
"<p>offsetLeft:"+div2.offsetLeft+"</p>"+
"<div style='left:200px;top:200px' id='div3'>div</div>";
};
/*现在chrome下测试所有的值;
left,top:为元素的margin外边距到包含容器的padding的像素值;
如果容器是body的话：
offsetLeft包含了body的borderLeft;
如果包含容器不是body的话：
offsetLeft, offsetTop为元素的外边框边距到包含容器的内边框边距的像素值;
clientLeft为borderLeft;
没有滚动的情况下:
clientWidth为元素的内容宽度加上两边的padding;
clientHeight同理;
没有滚动的情况下你不要计算scrollWidth，因为浏览器之间的定义不一样， 直接认为和clientWidth一样好了;
有滚动的情况下：
clientWidth为视口的宽度
scrollWidth为内部滚动区域的长度;
scrollLeft为隐去的左侧距离;
*/
</script>
</script>
</body>
</html>
offsetLeft, offsetTop以及postion().left , postion().top有神马区别的更多相关文章
- 1.offsetParent,offsetLeft,offsetTop
offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...
- JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别
/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...
- menu({postion:{my:"left top"},at:"right bottom"})里的my与at会冲突吗
my(默认值:"center")类型:String描述:定义被定位元素上对准目标元素的位置:"horizontal vertical" 对齐方式.一个单一的值, ...
- .offsetLeft,.offsetTop
*{ margin:0; padding:0} div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; ...
- js中offsetLeft,offsetTop,offsetParent计算边距方法
封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetPare ...
随机推荐
- 【iOS 初见】第一个简单的 iOS 应用
本实例来自 <iOS编程(第4版)>,介绍如何编写一个简单的 iOS 应用. 功能为:在视图中显示一个问题,用户点击视图下方的按钮,可以显示相应的答案,用户点击上方的按钮,则会显示一个新的 ...
- [转载]ExtJs4 笔记（7） Ext.tip.ToolTip 提示
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP
题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...
- UVA 11766 Racing Car Computer --DP
题意:电脑记录了某一时刻每个赛车的前面和后面个有多少辆车(多个车并排时在别的车那只算一辆),问最少有多少个不合理的数据. 分析:看到n<=1000时,就尽量往DP上想吧. 每输入一组数据a,b, ...
- leetcode : valid binary search tree
不能通过 当元素中 有 val == INT_MAX 或者 val == INT_MIN /** * Definition for a binary tree node. * struct Tree ...
- 第51课 C++对象模型分析（下）
1. 单继承对象模型 (1)单一继承 [编程实验]继承对象模型初探 #include <iostream> using namespace std; class Demo { protec ...
- AC日记——石子归并 codevs 1048
1048 石子归并 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 有n堆石子排成一列,每堆石子 ...
- uGUI VS NGUI
前言 这篇日志的比较是根据自己掌握知识所写的,请各路大神多多指教. 引擎版本: Unity 4.6 beta 两者区别 1.uGUI的Canvas 有世界坐标和屏幕坐标 2.uGUI的Button属性 ...
- 一个完整的JENKINS下的ANT BUILD.XML文件
网上看见的,确实很全,该有的基本都覆盖到了.自己拿来稍微改改就可以用了. 注:property中的value是你自己的一些本地变量.需要改成自己的 <?xml version="1.0 ...
- 【转】【WPF】资源读取 URI
一开始看到WPF里面经常用如下语句来构造资源文件Uri: Uri uri = new Uri("/AssemblyName;component/image.png"); 我还以为这 ...