Javascript 获取页面元素相对于电脑屏幕的坐标

最新推荐文章于 2023-09-30 20:24:54 发布

最新推荐文章于 2023-09-30 20:24:54 发布 · 1.9k 阅读

文章标签：

#javascript #页面元素 #屏幕 #坐标 #ViewUI

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文提供了一种通过JavaScript获取页面中元素绝对位置的方法。该方法首先检查浏览器是否支持getBoundingClientRect()方法，若支持则直接调用并进行屏幕和文档偏移修正；若不支持，则采用offsetLeft和offsetTop属性递归累加的方式计算。最后返回包含x和y坐标的对象。

这个没什么可说的，直接上代码，有需要的可以参考一下：


//获取元素绝对位置
function getAbsPosition(element)
{
    var abs={x:0,y:0}

    //如果浏览器兼容此方法
    if (document.documentElement.getBoundingClientRect) 
    {             
        //注意，getBoundingClientRect()是jQuery对象的方法
        //如果不用jQuery对象，可以使用else分支。
        abs.x = element.getBoundingClientRect().left;         
        abs.y = element.getBoundingClientRect().top;

        abs.x += window.screenLeft +  
                    document.documentElement.scrollLeft -            
                    document.documentElement.clientLeft;
        abs.y += window.screenTop +  
                    document.documentElement.scrollTop -  
                    document.documentElement.clientTop;

    } 

    //如果浏览器不兼容此方法
    else
    {
        while(element!=document.body)
        {
            abs.x+=element.offsetLeft;
            abs.y+=element.offsetTop;
            element=element.offsetParent;
        }

     //计算想对位置
     abs.x += window.screenLeft + 
            document.body.clientLeft - document.body.scrollLeft;
     abs.y += window.screenTop + 
            document.body.clientTop - document.body.scrollTop;

    }

    return abs;
}