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 || bottom - top,

        width:    width || right - left

    }

}

转载自：https://segmentfault.com/a/1190000016815362

巴特西

getBoundingClientRect介绍

最新文章

热门文章