获取任意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 Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
微信小程序实现图片上传
May 23 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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 神盾解密工具 ”
2014/06/20 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
学习python可以干什么
2019/02/26 Python
keras 读取多标签图像数据方式
2020/06/12 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
销售代理协议书
2014/09/30 职场文书
团拜会主持词
2015/07/04 职场文书
调解协议书范本
2016/03/21 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript