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

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

获取边界客户端矩形

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

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

js;toolbar:false">document.documentElement.scrollTop
document.documentElement.scrollLeft

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

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

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

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

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

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

width 元素的宽度

height 元素的高度

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

使用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滚动条下且不在可见范围内的值。


免责声明
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在
转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并白负版权等法律责任。

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

目录[+]

取消
微信二维码
微信二维码
支付宝二维码