花了点时间研究了这几个容易混的属性,看看offsetLeft/offsetTop
 
本文假定你已经了解了DOM树结构:
js之offsetLeft属性探讨_第1张图片
 
js之offsetLeft属性探讨_第2张图片
 
不如正题:
 
由于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>
 
上面代码在FF3/ie6/Opera9/safari3结果都如下:
 
js之offsetLeft属性探讨_第3张图片
没看出什么不同来。
 
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>
 
 
出现了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;
}
 
结果:
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>
 
在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重叠的问题。
 
 
 
为了验证结论,再来几个例子:
 
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type"
content="text/html; charset=utf-8" />
offsetLeft探讨




  
"divTest">
    
"dd">呵呵

  


  
 
 
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
 
Opera9
#elem.offsetLeft=body.(borderLeft+paddingLeft)+...+parent .marginLeft+parent.BorderLeft+parent.PaddingLeft+#elem.marginLeft

#dd.offsetLeft=(5px+0px)+(8px+6px+10px)+7px=36px

 
不过这个公式,当body有margin时,又不好用了,乱了,先不整理了。
 
如果body有margin时
ff3和safari3还要加上margin,但不加border很奇怪
而Opera9也会加上margin
IE比较坚守阵地,死活不加。
于是总结
如果body具有border时,几个浏览器计算有差异,如果记不住,最好不要给body加Border
这点看来Opera比较标准些,FF3和Safari却不计算body的border.
IE不会加margin.
 
所以不要给body加border,这样可以分
ie6和FF3/safari3/opera9一共2类