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

Javascript
论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”
JavaScript 撑出页面文字换行
JavaScript 高级语法介绍
Javascript 表格操作实现代码
javascript 获取鼠标的绝对位置 event
Input 特殊事件onpopertychange和oninput
javascript 一段左右两边随屏滚动的代码
JS 分号引起的一段调试问题
根据服务器时间作为起始，显示时钟的小程序
js 匿名调用实现代码
javascript 缓冲效果 实现代码
javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码
javascript 获取radio的value的函数 [已测]
Javascript 代码也可以变得优美的实现方法
使弱类型的语言JavaScript变强势
js 单引号 传递方法
利用WebBrowser彻底解决Web打印问题（包括后台打印）
web 页面分页打印的实现
可以拖动的div 实现代码
WordPress 照片lightbox效果的运用几点

No. « 141 142 143 144 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 373 ::
收藏到网摘: 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>