网站地图    收藏   

主页 > 前端 > javascript >

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这个功能了,因为代码简单明了哦,兼容性强。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论