如何准确确定HTML元素的尺寸？

确定 HTML 元素的实际尺寸

当尝试在浏览器视口中对齐 HTML 元素时，必须准确获取其尺寸实际宽度和高度。这需要利用各种浏览器支持的特定属性和函数。

.offsetWidth 和 .offsetHeight

要在不考虑 CSS 转换的情况下确定元素的宽度和高度，请使用.offsetWidth 和 .offsetHeight 属性。与 .style 不同，这些属性可以在元素上直接访问。

var width = document.getElementById('foo').offsetWidth;

getBoundingClientRect()

.getBoundingClientRect() 函数提供更精确的读取应用 CSS 转换后元素的尺寸和位置。它返回指示以下属性的浮点数：

console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

浏览器支持

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

以上是如何准确确定HTML元素的尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！