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


Posted in Javascript onDecember 22, 2006

问题:
如何取到页面中任意某个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+"\n\nL:"+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>

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
js实现删除li标签一行内容
Apr 16 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
获取Javscript执行函数名称的方法
Dec 22 #Javascript
在Javascript中定义对象类别
Dec 22 #Javascript
枚举JavaScript对象的函数
Dec 22 #Javascript
JavaScript使用prototype定义对象类型(转)[
Dec 22 #Javascript
拖动Html元素集合 Drag and Drop any item
Dec 22 #Javascript
拖动一个HTML元素
Dec 22 #Javascript
JavaScript中Array 对象相关的几个方法
Dec 22 #Javascript
You might like
Zend的MVC机制使用分析(二)
2013/05/02 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP多文件上传类实例
2015/03/07 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python使用剪切板的方法
2017/06/06 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python轮询机制控制led实例
2020/05/03 Python
python能开发游戏吗
2020/06/11 Python
python程序需要编译吗
2020/06/19 Python
python 爬取小说并下载的示例
2020/12/07 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
MySQL面试题目集锦
2016/04/14 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
中式结婚主持词
2014/03/14 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
应届生求职自荐信
2014/07/04 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
python pygame入门教程
2021/06/01 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技