原生 js 如何获取宽高
最新回答
岁月和你两无言
2026-10-23 15:31:59
在项目中，我们需要获取DOM元素的尺寸，因此，本文将对比分析所有JS获取尺寸的方法和相关的DOM定位方式。
以下是JS获取尺寸的方法：
clientWidth & clientHeight
clientWidth属性表示元素的内部宽度，包括padding，但不包括border、margin和垂直滚动条（如果有）。对于内联元素或没有CSS的元素，其值为0。
offsetWidth & offsetHeight
offsetWidth表示元素的CSS宽度（包括border、padding和垂直滚动条，如果渲染），但不包括伪元素（如::before或::after）的宽度。
scrollWidth & scrollHeight
scrollWidth表示元素在无需横向滚动条的情况下所需的最小宽度，包括padding，但不包括border、margin或垂直滚动条。如果没有横向滚动条，其值与clientWidth相同；如果有横向滚动条，则包括可视区域、隐藏区域和padding。
getComputedStyle
Window.getComputedStyle()方法返回一个对象，包含元素的CSS属性值，在应用样式表和计算基本计算值后。可以通过属性名或API访问获取某个CSS属性的值。
getBoundingClientRect
Element.getBoundingClientRect()方法返回元素的大小和相对于视口的定位。元素的大小等于其宽度/高度+padding+border-width，如果使用标准盒模型，或者仅包括宽度/高度，如果设置了box-sizing: border-box。
热门标签
