getBoundingClientRect介绍

getBoundingClientRect用于获取元素相对与浏览器视口的位置
由于getBoundingClientRect()已经是w3c标准，所以不用担心兼容，不过在ie下还是有所区别
{
top: ‘元素顶部相对于视口顶部的距离’,
bottom: ‘元素底部相对于视口底部的距离’,
left: ‘元素左边相对于视口左边的距离’,
right: ‘元素右边相对于视口左边的距离’,
height: ‘元素高度’,
width: ‘元素宽度’
}

// 兼容写法
function getClientReat(client) {
const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
return {
top,
bottom,
left,
right,
height: height || right – left,
width: width || bottom – top
}
}