使用js获取页面上某个元素在浏览器可见窗口中的坐标(位置)

2023-08-09 1894阅读

如果想要获取到页面的距离,比如:如果左侧或者顶部有滚动条,则需要在下面添加相应的滚入值。该函数的返回值是一个对象。ie5以上都可以支持,但是还有几个地方需要修正。IE67的左侧和顶部会少2px,并且没有宽度和高度属性。比如元素还可以获取div滚动条下且不在可见范围内的值。

获取边界客户端矩形

该函数可以获取元素到浏览器窗口的位置值,注意浏览器不是页面

如果想要获取到页面的距离,比如:如果左侧或者顶部有滚动条,则需要在下面添加相应的滚入值。

document.documentElement.scrollTop
document.documentElement.scrollLeft

通过该函数可以获取Obj.getBoundingClientRect()。 该函数的返回值是一个对象。 该对象的属性为(上、左、右、下、宽、高;)

top 元素上边缘到浏览器上边缘的距离

使用js获取页面上某个元素在浏览器可见窗口中的坐标(位置)

left 元素左侧到浏览器左侧的距离

right 元素右侧到浏览器左侧的距离

底部元素的下边缘到浏览器上边缘的距离

width 元素的宽度

height 元素的高度

image.png

使用js获取页面上某个元素在浏览器可见窗口中的坐标(位置)

兼容性

ie5以上都可以支持,但是还有几个地方需要修正。

IE67的左侧和顶部会少2px,并且没有宽度和高度属性。

功能

以下是原生的写法,兼容原有功能的扩展

function getObjRect(obj) {
    if ('string' == typeof(obj)) {
        obj = document.getElementById(obj);
    }
    var ro = obj.getBoundingClientRect();
    //document.documentElement.clientTop 在IE67中始终为2,其他高级点的浏览器为0
    ro.top = ro.top - document.documentElement.clientTop;
    //document.documentElement.clientLeft 在IE67中始终为2,其他高级点的浏览器为0
    ro.left = ro.left - document.documentElement.clientLeft;
    ro.Width = ro.width || ro.Right - ro.Left;
    ro.Height = ro.height || ro.Bottom - ro.Top;
    return ro
}

备注:只要元素不在display中:none; 样式,即可获得。 比如元素还可以获取div滚动条下且不在可见范围内的值。

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]