getBoundingClientRect() 获取元素的大小及其相对于视口的位置

getBoundingClientRect方法返回元素的大小及其相对于视口的位置，该方法没有参数。

返回值是一个对象（DOMRect对象）

// 获取视窗的宽度
var doc= win.document.documentElement
console.log(doc.getBoundingClientRect()) // 获取位置集合

 上述输出内容，即getBoundingClientRect方法返回元素的大小及其相对于视口的位置集合：

DOMRect {x: 0, y: 0, width: 360, height: 8, top: 0, …}
bottom: 8
height: 8
left: 0
right: 360
top: 0
width: 360
x: 0
y: 0
__proto__: DOMRect

该方法参考的是视窗的 上边 和 左边，所以：

// box代表某一元素
box.getBoundingClientRect().top // 获取元素上边距离视窗上边的距离
box.getBoundingClientRect().bottom // 获取元素下边距离视窗上边的距离
box.getBoundingClientRect().left  // 获取元素左边距离视窗左边的距离
box.getBoundingClientRect().right // 获取元素右边距离视窗左边的距离

声明一点，在移动端获取视窗的宽度，首先应该配置视窗选项：（添加meta标签）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性说明：

• width=device-width ：表示宽度是设备屏幕的宽度
• initial-scale=1.0：表示初始的缩放比例
• minimum-scale=0.5：表示最小的缩放比例
• maximum-scale=2.0：表示最大的缩放比例
• user-scalable=no：表示用户是否可以调整缩放