当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 获取元素位置的快速方法 getBoundingClientRect()

Javascript
JavaScript入门教程 Cookies
IE8 浏览器Cookie的处理
JS 强制设为首页的代码
JS之日历实践附实现代码
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
JAVASCRIPT keycode总结
javascript 学习之旅 (1)
javascript 学习之旅 (2)
javascript 学习之旅 (3)
[Web]防止用户复制页面内容和另存页面的方法
让网页根据不同IE版本显示不同的内容
让input不可点击的另一种方法
fckeditor 获取文本框值的实现代码
jquery插件jbox使用iframe关闭问题
js获取提交的字符串的字节数
JS IE和FF兼容性问题汇总
js函数使用技巧之 setTimeout(function(){},0)
javascript 模拟select下拉列表特效
js 静态HTML表格排序功能实现
JavaScript 克隆数组最简单的方法

Javascript 中的 javascript 获取元素位置的快速方法 getBoundingClientRect()


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 386 ::
收藏到网摘: n/a

有一种快速获得网页元素的位置。那就是使用getBoundingClientRect()方法。 它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。
所以,网页元素的相对位置就是
  var X= this.getBoundingClientRect().left;
  var Y =this.getBoundingClientRect().top;
再加上滚动距离,就可以得到绝对位置
  var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
  var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。