getBoundingClientRect介绍

共计 399 个字符，预计需要花费 1 分钟才能阅读完成。

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
}
}