js之offsetLeft属性探讨

 

花了点时间研究了这几个容易混的属性，看看offsetLeft/offsetTop

 

本文假定你已经了解了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>

 

上面代码在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>

 

 

出现了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" />





  

"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类