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

Javascript
Prototype使用指南之form.js
Prototype1.5 rc2版指南最后一篇之Position
javascript 对象的定义方法
JS多级连动菜单
javascript编程起步(第一课)
javascript编程起步(第二课)
java script编程起步(第三课)
jquery简单体验
javascript编程起步(第四课)
javascript编程起步(第五课)
javascript编程起步(第六课)
javascript编程起步(第七课)
javascript object oriented 面向对象编程初步
js宝典学习笔记(上)
JS宝典学习笔记(下)
javascript基础的动画教程,直观易懂
javascript 的面向对象特性参考
JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接
JScript面向事件驱动的编程
一份老外写的XMLHttpRequest代码多浏览器支持兼容性

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 271 ::
收藏到网摘: 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不支持。