获取任意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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
vue-router单页面路由
Jun 17 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vuex实现购物车功能
Jun 28 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
layui使用label标签的方法
2019/09/14 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
python根据路径导入模块的方法
2014/09/30 Python
pyqt5自定义信号实例解析
2018/01/31 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
浅谈Python type的使用
2019/11/19 Python
python计算auc的方法
2020/09/09 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
大学校园毕业自我鉴定
2014/01/15 职场文书
工作说明书范文
2014/05/07 职场文书
校园演讲稿汇总
2014/05/21 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
教师考核鉴定意见
2015/06/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python