知识大全 js获取元素到文档区域document的坐标方法

Posted 2022-07-20 元素

篇首语：自己选择的路，跪着也要走完。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js获取元素到文档区域document的坐标方法相关的知识，希望对你有一定的参考价值。

　　获取页面中元素到文档区域document的横向纵向坐标的两种方法及其比较

　　在js控制元素运动的过程中对于页面元素坐标位置的获取是经常用到的这里主要总结下两种方法

　　一通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现

　　在阅读javascript高级程序设计第三版DOM部分时了解到要获取某个元素在页面上的偏移量需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加一直循环直至根元素所以要得到元素到文档区域的坐标位置只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止

　　js代码

　　代码如下:

　　// 获取元素到文档区域的坐标

　　function getPosition(element)

　　var actualLeft = element offsetLeft

　　actualTop = element offsetTop

　　current = element offsetParent; // 取得元素的offsetParent

　　// 一直循环直到根元素

　　while (current !== null)

　　actualLeft += current offsetLeft;

　　actualTop += current offsetTop;

　　current = current offsetParent;

　　// 返回包含left top坐标的对象

　　return

　　left: actualLeft

　　top: actualTop

　　;

　　例子截图

　　firebug下测试结果截图 (注其他浏览器已通过测试!)

　　二通过 getBoundingClientRect() 方法实现

　　getBoundingClientRect方法用于获得页面中某个元素的左上右和下分别相对浏览器视窗window的位置返回的是一个对象该对象有四个属性 top left right bottom;该方法原本是IE Only的但是FF +和Opera +已经支持了该方法可以说在获得页面元素位置上效率有很大的提高另外该方法避免使用while循环而是直接获取数值来实现比第一种方法性能要好特别是在复杂的页面上更为明显

　　js代码

　　代码如下:

　　// 获取元素到文档区域的坐标

　　function getPosition(element)

　　var dc = document

　　rec = element getBoundingClientRect()

　　_x = rec left // 获取元素相对浏览器视窗window的左上坐标

　　_y = rec top;

　　// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置

　　_x += dc documentElement scrollLeft || dc body scrollLeft;

　　_y += dc documentElement scrollTop || dc body scrollTop;

　　return

　　left: _x

　　top: _y

　　;

　　经测试该方法与第一种方法获取元素相对于document的坐标大小相同对于IE低版本浏览器存在一些差异

　　注意记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!

cha138/Article/program/Java/JSP/201311/20207