获取元素尺寸

在开发中，获取一个 dom 元素的尺寸可以使我们更好的了解这个元素的信息，更利于我们对元素样式进行调试以及对这个元素做其他一些操作，但某些情况下目标元素可能应用了 display:none 的样式，这样要获取到元素的尺寸信息就非常麻烦了。

getBoundingClientRect()

getBoundingClientRect() 方法返回一个对象，这个对象中包含了目标元素的尺寸信息以及相对于视口的位置信息，它的返回值如下：

• x：元素从视口左侧边缘到元素自身左侧边缘的距离
• y；元素从视口顶部边缘到元素自身顶部边缘的距离
• left：元素从视口左侧边缘到元素自身左侧边缘的距离
• right：元素从视口左侧边缘到元素自身右侧边缘的距离
• top：元素从视口顶部边缘到元素自身顶部边缘的距离
• bottom：元素从视口顶部边缘到元素自身底部边缘的距离
• width：元素的宽度
• height：元素的高度

获取元素尺寸

获取元素尺寸的方法具体实现如下：

function getElementSize(el) {

    //获取元素样式属性的方法
    const getStyle = (el,prop) => getComputedStyle(el).getPropertyValue(property)
    //获取元素是否设置了 'display:none' 属性
    const display = getStyle("display")
    
    //设置了 'display:none' 属性则模拟 'display:none' 样式来获取其尺寸信息
    if (display === "none") {
        const styles = [
            { key: "display", value: "block", origin: getStyle(el, "display") },
            { key: "pointer-events", value: "none", origin: getStyle(el, "pointer-events") },
            { key: "visibility", value: "hidden", origin: getStyle(el, "visibility") },
            { key: "z-index", value: -999, origin: getStyle(el, "z-index") },
        ]

        // 利用visibility、z-index、pointer-events属性模拟display：none效果
        for (const item of styles) {
            el.style[item.key] = item.value
        }

        // 获取元素尺寸信息
        const rect = el.getBoundingClientRect()

        // 将元素样式恢复
        for (const item of styles) {
            el.style[item.key] = item.origin
        }

        return rect
    } else {
        return el.getBoundingClientRect()
    }
}

//使用
<div id='el1'> 普通元素 </div>
<div id='el1' style='display:none;'> 隐藏元素 </div>

getElementSize(document.querySelector('#le1')) //rect{}
getElementSize(document.querySelector('#le2')) //rect{}