华山资源网

js获取元素到文档区域document的(横向、纵向)坐标的两种方法
网络编程 2024/11/11 佚名
3 1
获取页面中元素到文档区域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
};
}

例子截图：

js获取元素到文档区域document的(横向、纵向)坐标的两种方法 
firebug下测试结果截图：(注：其他浏览器已通过测试！)

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

二：通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗window的位置。返回的是一个对象，该对象有四个属性：top，left，right，bottom；该方法原本是IE Only的，但是FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率有很大的提高。 另外，该方法避免使用while循环，而是直接获取数值来实现，比第一种方法性能要好，特别是在复杂的页面上更为明显。
js代码：
复制代码 代码如下:
// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document,
rec = element.getBoundingClientRect(),
_x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标
_y = rec.top;
// 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft;
_y += dc.documentElement.scrollTop || dc.body.scrollTop;
return {
left: _x,
top: _y
};
}

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

注意：记得要累加上html(IE除外)或body(针对IE)元素的水平或垂直滚动距离！
结语：上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述，如遇到相关问题，可联系本人或直接发表评论，另外，对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，当然offsetWidth、offsetHeight属性会计算元素的内边距、边框，所以最好的办法还是通过getBoundingClientRect方法来获取。ps：补充一点，利用该方法返回对象的right-left = 元素宽度；bottom-top = 元素高度。可以获取不带边框的元素本身的宽度和高度。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com