Javascript 轻鬆获得元素大小、位置的实用方法| getBoundingClientRect()

返回值是一个 DOMRect物件 ，用px 为单位描述这个矩形的位置跟大小。
其中包含 x/y/width/height/top/right/bottom/left 等属性。

图截自: 那些被忽略但很好用的 Web API / GetBoundingClientRect

然后注意他的宽跟高是有包含border宽度的；而位置属性则是从viewport(视窗)的左上角开始算。

例如下面是我测量我的nav的links:
我对他做console.log(links.getBoundingClientRect());

结果是这个
{
"x": 24,
"y": 66,
"width": 684,
"height": 201.60000610351562,
"top": 66,
"right": 708,
"bottom": 267.6000061035156,
"left": 24
}

他使用的时机蛮广的，例如我想做navebar toggle，让我的linksContainer中可以动态添加links而不需要把高度写死，这时就可以用 getBoundingClientRect() 方法。取得内部links的高度，然后再使外面 linksContainer的高度等于 links的高度就可以了。
程式码:

const navToggle=document.querySelector('.nav-toggle');const linksContainer=document.querySelector('.links-container');const links=document.querySelector('.links');navToggle.addEventListener('click',function(){    // linksContainer.classList.toggle('show-links');    const containerHeight=linksContainer.getBoundingClientRect().height;    const linksHeight=links.getBoundingClientRect().height;    console.log(links.getBoundingClientRect());    if(containerHeight===0){        linksContainer.style.height=`${linksHeight}px`;    }else{        linksContainer.style.height=0;    }})

参考资料:那些被忽略但很好用的 Web API / GetBoundingClientRect
MDN