如何获取 HTML 元素的宽度和高度以实现精确居中？-js教程-PHP中文网

如何获取 HTML 元素的宽度和高度以实现精确居中？

Linda Hamilton

发布： 2024-12-04 01:25:12

原创

749 人浏览过

How Can I Get the Width and Height of an HTML Element for Precise Centering?

计算居中的 HTML 元素宽度和高度

要将 HTML 元素在浏览器显示中居中，确定其实际宽度和高度至关重要。以下是实现此目标的方法：

1. .offsetWidth 和 .offsetHeight 属性

您可以使用以下方法检索元素的偏移宽度和高度：

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

登录后复制

2。 .getBoundingClientRect() 函数

此函数提供有关元素尺寸和位置的更多详细信息，考虑 CSS 转换：

console.log(document.getElementById('foo').getBoundingClientRect())

/* Output:
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
*/

登录后复制

浏览器支持：

.offsetWidth 和.offsetHeight: 所有主流浏览器 (IE8)
.getBoundingClientRect(): 所有主流浏览器 (IE9)

以上是如何获取 HTML 元素的宽度和高度以实现精确居中？的详细内容。更多信息请关注PHP中文网其他相关文章！