当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

Javascript
一个js写的日历（代码部分网摘）
IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
jquery 子窗口操作父窗口的代码
用JavaScript隐藏控件的方法
js 冒泡事件与事件监听使用分析
ie与ff下的event事件
比较全面的event对像在IE与FF中的区别 推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
JavaScript 变量命名规则
没有form表单情况下敲回车键提交表单的js代码
jQuery 使用手册(四)
jQuery 使用手册(六)
jQuery 使用手册(七)
Javascript 数组添加一个 indexOf 方法的实现代码
Javascript 数组添加 shuffle 方法的实现代码
Javascript 两个窗体之间传值实现代码
Javascript showModalDialog两个窗体之间传值
js 覆盖和重载 函数
JavaScript中Object和Function的关系小结
javascript parseInt 大改造

No. « 186 187 188 189 »

技术文章搜索

关键字

Javascript 中的 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 311 ::
收藏到网摘: n/a

问题：
如何取到页面中任意某个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="枫岩,[email protected]">
<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>