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

Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
ExtJS 2.0 实用简明教程之布局概述
ExtJS 2.0实用简明教程之应用ExtJS
ExtJS 2.0实用简明教程 之获得ExtJS
javascript 扫雷游戏
ExtJS 2.2.1的grid控件在ie6中的显示问题
jquery-1.2.6得到焦点与失去焦点的写法
一组JS创建和操作表格的函数集合
extjs fckeditor集成代码
jquery 实现京东商城、凡客商城的图片放大效果
jQuery 技巧大全(新手入门篇)
JavaScript设置FieldSet展开与收缩
event.keyCode键码值表 附只能输入特定的字符串代码
js 图片缩放特效代码
jquery(1.3.2) 高亮选中图片边框
js 使用方法与函数 总结
Js 本页面传值实现代码
javascript获取div的内容 精华篇
innerText innerHTML的用法以及注意事项 [推荐]
jquery 圆角遮罩图片实现图片圆角

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


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