js之offsetLeft属性探讨(转)
本文共 5535 字，大约阅读时间需要 18 分钟。
花了点时间研究了这几个容易混的属性，看看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"> <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
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类
转载地址：http://ydyxi.baihongyu.com/
你可能感兴趣的文章
面向对象程序设计2018上机题（5）
查看>>
2018数模国赛B题（3.1）完整实现代码
查看>>
2020.3.14docker
查看>>
6.28 redis详述
查看>>
SpringCloud-v2（21-5-21-20-9-11）
查看>>
2020.11.02 mybatis-分页
查看>>
2020.11.20 前端html
查看>>
2021.1.15 主从复制、持久化备份、过半投票、区块链、p2p
查看>>
2021.3.1 Vue
查看>>
2021-07-04 分布式项目
查看>>
2019.5.28 mockti的分析
查看>>
2019.6.12 Spring_IOC
查看>>
2019.6.14 spring-AOP
查看>>
2019.6.18 spring的xml和注解
查看>>
2019.7.17docker
查看>>
2019.7.19 springboot与数据访问
查看>>
2019.7.24 springboot启动初始化过程源码分析和自定义starter场景启动
查看>>
2019.8.13 oracle数据库操作
查看>>
(转)Flutter 1.9 正式发布！令人期待的全平台创新开发体验
查看>>
一文看懂Google I/O 2021开发者大会
查看>>