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

Javascript
JavaScript实际应用:innerHTMl和确认提示的使用
CheckBox 如何实现全选?
解密效果
文本加密解密
快速保存网页中所有图片的方法
如何取得中文输入的真实长度?
Javascript调用XML制作连动下拉列表框
表格轮换显示 强
超级强大的表单验证
图片之间的切换
客户端静态页面玩分页
接收键盘指令的脚本
如果文字过长,则将过长的部分变成省略号显示
些很实用且必用的小脚本代码
经典的带阴影的可拖动的浮动层
漂亮的仿flash菜单,来自蓝色经典
Ctrl+Enter提交内容信息
accesskey 提交
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
滚动效果

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


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