获取任意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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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)
2010/09/04 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
一套Delphi的笔试题二
2013/05/11 面试题
化学相关工作求职信
2013/10/02 职场文书
教学大赛获奖感言
2014/01/15 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
建筑工地标语
2014/06/18 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL