js之offsetLeft属性探讨(转)

来源：互联网发布：麦迪cba数据编辑：程序博客网时间：2024/05/22 10:31

花了点时间研究了这几个容易混的属性，看看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重叠的问题。

为了验证结论，再来几个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>offsetLeft探讨</title>

{

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>

</body>

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

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类