作家
登录

获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[

作者: 来源:www.28hudong.com 2013-03-30 03:53:52 阅读 我要评论

问题: 如何取到页面中任意某个Html元素与body元素之间的偏移距离? offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异: IE5.0+ 、Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对于body元素 因此: (1)在FF下直接使用offsetTop和offsetLeft,就可以取到页面中任意某个Html元素与body元素之间的偏移距离; (2)在IE、Opera下则比较麻烦: 需要首先取到该Html元素与body元素之间所有Html元素,计算各自的offsetTop和offsetLeft,然后再累加。 即:从该Html元素开始,遍历至body,在遍历的过程中,如果某个HTML元素的CSS设置了borderWidth的话,则borderWidth不是算在offsetTop和offsetLeft内的--因此在遍历的过程中,还需要累加上: obj.currentStyle.borderLeftWidth、obj.currentStyle.borderTopWidth 下面这段测试代码已经解决上述问题,兼容IE5、FF1,但在Opera8下无效 实例代码: <!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" lang="gb2312"> <head> <head> <title> 代码实例:获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft </title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="author" content="枫岩,CNLei.y.l@gmail.com"> <style type="text/css" media="all"> body,p {margin:0;padding:0;font-size:12px;} body {float:left;width:100%;} ul,ul li {margin:0;padding:0;list-style:none;padding:0;} ul li input {border:1px solid #ccc;} #Bd { background:#FFE8D9; float:left; padding:20px; border:10px solid #f90;/*该值在IE下还是取不到*/ width:100%; } #BS { padding:20px; float:left; background:#58CB64; } #BS ul {border:20px solid #DDF1D8;} #BM { margin-top:100px; float:right; width:300px; background:#fff; } </style> <script type="text/javascript"> var w3c=(document.getElementById)? true:false; var agt=navigator.userAgent.toLowerCase(); var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1)); var ie5=(w3c && ie)? true : false; var ns6=(w3c && (navigator.appName=="Netscape"))? true: false; var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true; function Obj(o){ return document.getElementById(o)?document.getElementById(o):o; } function GetXYWH(o){ var nLt=0; var nTp=0; var offsetParent = o; while (offsetParent!=null && offsetParent!=document.body) { nLt+=offsetParent.offsetLeft; nTp+=offsetParent.offsetTop; if(!ns6){ parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):""; parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):""; } offsetParent=offsetParent.offsetParent; //alert(offsetParent.tagName); } alert("ID:"+o.id+"nnL:"+nLt+" T:"+nTp+"nW:"+o.offsetWidth+" H:"+o.offsetHeight); } </script> </head> <body> <p style="height:100px;margin:0;padding:0;background:#00f;color:#fff;line-height:100px;text-align:center;">此色块高:100px;</p> <div id="Bd"> <div id="BS"> <ul> <li><input type="text" value="无法取到橙黄色的边框线宽度(border:10px solid #f90;)" onclick="GetXYWH(this);" size="60" /></li> <li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> <li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> <li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> <li><input type="text" value="GetXYWH(Obj('BM'));" onclick="GetXYWH(Obj('BM'));" size="60" /></li> </ul> </div><!--BS--> <div id="BM" onclick="GetXYWH(this);"> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> </div><!--BM--> </div> </body> </html>

  推荐阅读

  颜色选择: ColorMatch 5K

body {background-color:#E6E6E6; font:10px tahoma; margin:30px; margin-top:20px; color:#323232; } p {margin:0px; margin-bottom:4px; font:11px tahoma;>>>详细阅读


本文标题:获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[

地址:http://www.17bianji.com/kaifa2/JS/31249.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)