JavaScript 获取页面元素的offset值代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给大家介绍JavaScript 获取页面元素的offset值代码，有需要了解offset获取的方法朋友可进入参考参考。...
|
js获取方法。
| 代码如下 |
复制代码 |
|
document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;
|
用IETester和FireFox再测试下，IE6+下都可以，如以前一样，写出的纯js的方法无情地被FireFox鄙视了，获取的值不正确。
网上再查了下，发现应该这样写，通过循环，层层向上计算，最后得到准确的offset值。
js获取网页控件的offset值的方法
| 代码如下 |
复制代码 |
|
//Colour pallete top offset
function getOffsetTop(elm) {
var mOffsetTop = elm.offsetTop;
var mOffsetParent = elm.offsetParent;
while(mOffsetParent) {
mOffsetTop += mOffsetParent.offsetTop;
mOffsetParent = mOffsetParent.offsetParent;
}
return mOffsetTop;
}
//Colour pallete left offset
function getOffsetLeft(elm) {
var mOffsetLeft = elm.offsetLeft;
var mOffsetParent = elm.offsetParent;
while(mOffsetParent) {
mOffsetLeft += mOffsetParent.offsetLeft;
mOffsetParent = mOffsetParent.offsetParent;
}
return mOffsetLeft;
} function ie_y(e) {
var t=e.offsetTop;
while(e=e.offsetParent) {
t+=e.offsetTop;
}
return t;
}
function ie_x(e) {
var l=e.offsetLeft;
while(e=e.offsetParent) {
l+=e.offsetLeft;
}
return l;
}
|
jQuery的实现
再细一步去查相关问题时发现jQuery中已经包含了实现此功能的函数：offset()，很好地兼容了各浏览器。
| 代码如下 |
复制代码 |
|
$("#Button").offset().left
|
个人更喜欢使用jquery这个功能了，因为代码简单明了哦，兼容性强。 |
