html+距离下面,window_获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[，问题： 如何取到页面中任意某 - phpSt...

获取任意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、offsetLeft

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;

}

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()方法