首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 19:22:40
原创
1651人浏览过

问题:
如何取到页面中任意某个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下无效

实例代码:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



 代码实例:获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft 



<script> <BR>var w3c=(document.getElementById)? true:false; <BR>var agt=navigator.userAgent.toLowerCase(); <BR>var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1)); <BR>var ie5=(w3c && ie)? true : false; <BR>var ns6=(w3c && (navigator.appName=="Netscape"))? true: false; <BR>var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true; <br><br>function Obj(o){ <BR> return document.getElementById(o)?document.getElementById(o):o; <BR>} <br><br>function GetXYWH(o){ <BR>var nLt=0; <BR>var nTp=0; <BR> var offsetParent = o; <BR> while (offsetParent!=null && offsetParent!=document.body) { <BR> nLt+=offsetParent.offsetLeft; <BR> nTp+=offsetParent.offsetTop; <BR> if(!ns6){ <BR> parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):""; <BR> parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):""; <BR> } <BR> offsetParent=offsetParent.offsetParent; <BR> //alert(offsetParent.tagName); <BR> } <BR>alert("ID:"+o.id+"\n\nL:"+nLt+" T:"+nTp+"\nW:"+o.offsetWidth+" H:"+o.offsetHeight); <BR>} <BR></script>


此色块高:100px;













测试

Humata
Humata

Humata是用于文件的ChatGPT。对你的数据提出问题,并获得由AI提供的即时答案。

Humata 82
查看详情 Humata

立即学习Java免费学习笔记(深入)”;


测试

立即学习Java免费学习笔记(深入)”;


测试

立即学习Java免费学习笔记(深入)”;


测试

立即学习Java免费学习笔记(深入)”;


测试

立即学习Java免费学习笔记(深入)”;






java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号