获取元素位置可以 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 及以下浏览器中, 可以通过计算得到元素的宽和高:
如:
var dom = document.querySelector("#demo"),
r = dom.getBoundingClientRect();
var width = r.right - r.left;
var height = r.bottom - r.top;
来源: http://www.qdfuns.com/notes/47066/f303c8b9f11352febc3037df4e1a4d69.html