offsetLeft, offsetTop 以及postion.left , postion.top有神马区别
最编程
2024-07-18 10:17:42
...
</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>
<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>