getBoundingClientRect方法获取元素位置

原创 卓卓亭亭兮 随笔 原生JavaScript 84阅读 2018-02-01 17:01:12 举报

获取元素位置可以 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,而 getBoundingClientRect 方法则
兼容性非常好,基本所有的浏览器都支持了。

1.使用语法:

element.getBoundingClientRect();

方法中没有任何参数,返回值为对象类型。

2.在IE8及以下的浏览器中,返回值对象包含的属性值有:

top: 元素上边缘距离文档顶部的距离;

right: 元素右边缘距离文档左边的距离;

bottom:元素下边缘距离文档顶部的距离;

left:元素左边缘距离文档左边的距离;

3.在IE9以上、谷歌、火狐等浏览器中,返回值对象包含的属性值有:

top: 元素上边缘距离文档顶部的距离;

right: 元素右边缘距离文档左边的距离;

bottom:元素下边缘距离文档顶部的距离;

left:元素左边缘距离文档左边的距离;

width:元素的宽度(包含 padding 和 border)

height:元素的高度(包含 padding 和 border)

4.在IE8及以下浏览器没有 width 和 height 属性的解决方法:

在IE8及以下浏览器中,可以通过计算得到元素的宽和高:

如:

[quote]var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect();

var width = r.right - r.left;
var height = r.bottom - r.top;[/quote]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复