当前位置:首页 前端开发 正文

JavaScript使用getBoundingClientRect来获取页面元素的绝对位置

2012年09月12日 | 作者: 米豆网 - 1000seo | 分类: 前端开发 | 

语法

oRect = object.getBoundingClientRect()

返回值

返回一个对象,该对象包含object元素的四个方向上相对当前视窗的坐标(top,left,right,bottom)

oRect.top,oRect.left,oRect.right,oRect.bottom

兼容性

除了safari,firefox2.0外所有浏览器都支持getBoundingClientRect,JavaScript使用getBoundingClientRect在获得页面元素位置上效率能有很大的提高

<body style=”width:2000px; height:1000px;”>

<div id=”test” style=”position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;”>1000seo.com test为了方便就直接用绝对定位的元素</div>

</body>

要获取上面的test元素的绝对位置可以使用下面的方法

var X= document.getElementById(‘test’).getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =document.getElementById(‘test’).getBoundingClientRect().top+document.documentElement.scrollTop;

但是有人也这样写

var X= document.getElementById(‘test’).getBoundingClientRect().left+document.body.scrollLeft;

var Y =document.getElementById(‘test’).getBoundingClientRect().top+document.body.scrollTop;

其实上面两种方法都正确,只是使用的前提条件不同

在ie5.5以前或非w3c标准(简单的说是不带<!DOCTYPE ..>标签)的页面可以使用第二种方法获取到正确的值,但在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里document.body.scrollTop和document.body.scrollLeft始终返回0,document.documentElement.scrollLeft和document.documentElement.scrollTop才能返回正确的值.

考虑兼容性上面的代码可以这样写

var top=document.body.scrollTop||document.documentElement.scrollTop;

var left=document.body.scrollLeft||document.documentElement.scrollLeft;

var X= document.getElementById(‘test’).getBoundingClientRect().left+left;

var Y =document.getElementById(‘test’).getBoundingClientRect().top+top;

本文章由 米豆网 - 1000seo 于2012年09月12日发布在前端开发分类下,您可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
+复制链接 转载请注明:JavaScript使用getBoundingClientRect来获取页面元素的绝对位置-米豆网
关键字:, ,

好文章就要一起分享!

更多

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

😉 😐 😡 😈 🙂 😯 🙁 🙄 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗