获取任意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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
iview的table组件自带的过滤器实现
2019/07/12 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python实现的生成word文档功能示例
2019/08/23 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
会计出纳岗位职责
2013/12/25 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
拔河比赛口号
2014/06/10 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
机关保密工作承诺书
2015/05/04 职场文书
春风化雨观后感
2015/06/11 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
nginx实现动静分离的方法示例
2021/11/07 Servers