获取任意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.jstree 增加节点的双击事件代码
Jul 27 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
小程序实现列表多个批量倒计时
Jan 29 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
php 保留字列表
2012/10/04 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python操作xml文件详细介绍
2014/06/09 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python基础知识小结之集合
2015/11/25 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
办公室经理岗位职责
2014/01/01 职场文书
党员创先争优承诺书
2014/03/26 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
入团介绍人意见范文
2015/06/04 职场文书
多人股份制合作协议书
2016/03/19 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang