获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
问题:
如何取到页面中任意某个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下无效
实例代码:
代码实例:获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeftbody,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;
}
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);
}
此色块高:100px;
测试
测试
测试
测试
测试
相关阅读:
Linux环境下判断服务器是否正常关机
JS教程:Chrome对数组的sort方法优化
标记语言——再谈清单
Webjx收集的30个CSS导航及菜单教程
EditPlus 正则替换图片ubb替换成img
Oracle10g新特性——代码混淆
Linux下非常实用的命令行工具
JScript中值类型的封箱与拆箱
读jQuery之五(取DOM元素)
PHP 5.4RC1发布:帮助我们识别bug
ASP程序中调用函数Now()异常的问题
php更改目录及子目录下所有的文件后缀扩展名的代码
解决winXP中CPU占用率100%的方法
jQuery Ajax之load()方法