js之offsetLeft属性探讨
本文假定你已经了解了DOM树结构：
不如正题:
由于body的重要性，所以成为了document的一个属性，可以document.body直接访问到。
html中body表明着我们要在浏览器客户区呈现的内容。
1.offsetLeft
< !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 >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
}
</style>
</head>
< body >
< div id ="divTest" style ="border:6px solid red;margin1:8px;padding:5px;" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.body;
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
}
</style>
</head>
< body >
< div id ="divTest" style ="border:6px solid red;margin1:8px;padding:5px;" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.body;
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
上面代码在FF3/ie6/Opera9/safari3结果都如下:
没看出什么不同来。
2.接着添加代码
为body添加border:5px solid red;
< !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 >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
}
</style>
</head>
< body >
< div id ="divTest" style ="border:6px solid red;margin1:8px;padding:5px;" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.body;
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
}
</style>
</head>
< body >
< div id ="divTest" style ="border:6px solid red;margin1:8px;padding:5px;" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.body;
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
出现了ie6/safari3/opera9都显示:
0,0:null
而火狐3是
-5,-5:null
3.接着再为body加margin:5px 8px;
如下
body
{
width: 1000px;
padding: 50px 0;
background-color: #efeede;
border: 5px solid red;
margin: 5px 8px;
}
{
width: 1000px;
padding: 50px 0;
background-color: #efeede;
border: 5px solid red;
margin: 5px 8px;
}
结果：
FF3没变还是
-5,-5:null
opera9/safari3也没变还是
0,0:null
但ie6变了:
8,5:null
看来ie6是算上了margin.
4.看一下里面的 元素
< !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 >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
/*margin:5px 8px;*/
}
</style>
</head>
< body >
< div id ="divTest" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.getElementById('divTest');
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >offsetLeft探讨 </title>
< style type ="text/css" >
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
/*margin:5px 8px;*/
}
</style>
</head>
< body >
< div id ="divTest" >
< div id ="dd" >呵呵 </div>
</div>
</body>
< script type ="text/javascript" >
var elemTest=document.getElementById('divTest');
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
在FF3/safari3中:
0,50:[object HTMLBodyElement]
ie6里
0,50:[object]
看来FF3/safari3/ie6显示一样
在Opera9
5,55:[object HTMLBodyElement]
加上了border宽度。
继续添加
#divTest
{
border:6px solid #393;
}
结果都没有变。
继续修改如下:
#divTest
{
border:6px solid #393;
padding:10px;
margin:8px;
}
结果如下:
FF3和苹果Safari3:
8,58:[ object HTMLBodyElement]
看来都加上了margin:8px但padding不影响自己。
Opera9：
13,63:[ object HTMLBodyElement]
opera9的计算offsetLeft=5px+8px=13px,而offsetTop=55px+8px=63px
也是加上了8px的外margin.
但是ie6的margin重叠了
8,50:[ object]
ie6左右计算同FF3/safari3,offsetLeft=0px+8px的margin=8px
但是上下margin重叠所以offsetTop=max(50,8)=50px
结论:
Firefox3.0+, Safari3.0 , IE6
offsetLeft:元素的表框Border左上角距离Body内容区左上角的水平偏移。
Opera9:
offsetLeft:元素的表框Border左上角距离Body边框Border左上角的水平偏移。
对于offsetTop计算,IE6有个上下margin重叠的问题。
为了验证结论，再来几个例子：
<!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>offsetLeft探讨</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
/*margin:5px 8px;*/
}
#divTest
{
border:6px solid #393;
padding:10px;
margin:8px;
}
#dd
{
}
</style>
</head>
<body>
<div id="divTest">
<div id="dd">呵呵</div>
</div>
</body>
<script type="text/javascript">
var elemTest=document.getElementById('dd');
elemTest.innerHTML=elemTest.offsetLeft+","+elemTest.offsetTop+":"+elemTest.offsetParent;
</script>
</html>
FF3,Safari3:
24,74:[ object HTMLBodyElement]
实际上是其父容器的偏移加上左边框和左内距padding
如#divTest的offsetLeft=8px;
则#dd的offsetLeft=8px+(borderleft+padding-left)=8px+(6px+10px)=24px;
同理offsetTop=50px+8px+6px+10px=74px
而IE6:
24,66:[ object]
只是offsetTop由于重叠少了个8px的margin-top
Opera9:
29,79:[ object HTMLBodyElement]
opera9
offsetLeft=body.(5px+0px)+#divTest.(8px+6px+10px)+#dd.margin-left=29px
总结公式:
FF3 safari3:
#elem.offsetLeft=body.paddingLeft+...+parent .marginLeft+parent.BorderLeft+parent.PaddingLeft+#elem.marginLeft
解释:一个元素的左偏移offsetLeft=body的左padding+...中间的祖先的(marginLeft+borderLeft+paddingLeft)+自身的marginLeft
如
#dd.offsetLeft=0px+(8px+6px+10px)+7px=31px
#dd.offsetLeft=0px+(8px+6px+10px)+7px=31px
Opera9
#elem.offsetLeft=body.(borderLeft+paddingLeft)+...+parent .marginLeft+parent.BorderLeft+parent.PaddingLeft+#elem.marginLeft
如
#dd.offsetLeft=(5px+0px)+(8px+6px+10px)+7px=36px
#dd.offsetLeft=(5px+0px)+(8px+6px+10px)+7px=36px
不过这个公式，当body有margin时，又不好用了，乱了，先不整理了。
如果body有margin时
ff3和safari3还要加上margin,但不加border很奇怪
而Opera9也会加上margin
ff3和safari3还要加上margin,但不加border很奇怪
而Opera9也会加上margin
IE比较坚守阵地，死活不加。
于是总结
如果body具有border时，几个浏览器计算有差异，如果记不住，最好不要给body加Border
这点看来Opera比较标准些，FF3和Safari却不计算body的border.
这点看来Opera比较标准些，FF3和Safari却不计算body的border.
IE不会加margin.
所以不要给body加border,这样可以分
ie6和FF3/safari3/opera9一共2类