JS动态获取元素宽高的几种方式_Javascript

前期准备

我先准备了 2 个用来测试的 div：

<div id="box1"></div>
<div id="box2"></div>

样式如下，红色的 box1 有使用 css 明确定义的宽高，绿色的 box2 则是只定义了高度，宽度为父元素（页面）的 50%：

body {
  margin: 0;
}

#box1 {
  width: 100px;
  height: 100px;
  background-color: brown;
}

#box2 {
  width: 50%;
  height: 100px;
  background-color: cadetblue;
}

效果如下：

我通过 id 获取到了 box1 和 box2 对象：

const box1 = document.getelementbyid('box1')
const box2 = document.getelementbyid('box2')

offsetwidth 与 offsetheight

首先介绍的是 htmlelement 的只读属性 offsetwidth 与 offsetheight。我们可以直接打印查看 box1 和 box2 的宽高：

window.addeventlistener('resize', () => {
  console.log(box1.offsetwidth, box1.offsetheight)
  console.log(box2.offsetwidth)
})

结果如下，当文档宽度为 642.5px 时，box1.offsetwidth 和 box1.offsetheight 均为 100，box2.offsetwidth 的打印输出为 321：

表明：

offsetwidth 或 offsetheight 可以动态获取元素的宽高；
获取的结果是不带单位的；
获取的结果如果为小数，会被取整。

getboundingclientrect()

getboundingclientrect() 是一个方法，使用方法如下：

const rect1 = box1.getboundingclientrect()

返回的结果是一个 domrect 对象，其中除了元素的宽高信息外还有其它属性：

打印查看 box1 和 box2 的宽度：

window.addeventlistener('resize', () => {
  const rect1 = box1.getboundingclientrect()
  const rect2 = box2.getboundingclientrect()
  console.log(rect1.width)
  console.log(rect2.width)
})

结果如下：

表明：

getboundingclientrect() 可以动态获取元素的宽度（高度亦然）；
获取的结果同 offsetwidth 一样也是不带单位的；
与 offsetwidth 不同的是，它的结果不会取整。

getcomputedstyle()

getcomputedstyle() 也是一个方法，使用方式如下：

const style1 = getcomputedstyle(box1)

打印查看 style1，结果如下：

返回的对象基本上包含了 box1 的所有 css 属性。我们只需要查看 width 属性，所以可以：

window.addeventlistener('resize', () => {
  const style1 = getcomputedstyle(box1)
  const style2 = getcomputedstyle(box2)
  console.log(style1.width)
  console.log(style2.width)
})

得到的结果如下：

表明：

getcomputedstyle() 也可以动态地获取元素的宽度；
获取的结果是带单位的，这点与 getboundingclientrect() 或 offsetwidth 不同；
它的结果也不会取整。

边框、内边距的影响

现在我给 box1 的 css 添加上边框 (border) 和内边距 (padding)，研究对几种获取宽高的方式是否会产生影响：

#box1 {
  /* ...忽略之前的定义 */
  border: 1px solid #333;
  padding-left: 10px;
}

offsetwidth 与 offsetheight

现在打印的结果中，box1.offsetwidth 就会为 112，box1.offsetheight 为 102：

这说明 offsetwidth 和 offsetheight 的值是会包含边框和内边距的。

getboundingclientrect()

rect1.width 的打印结果会约等于 box1 的 width(100px) + border(1px*2) + padding(10px) 的 112px：

可见 getboundingclientrect() 获取的宽高是会包含边框和内边距的。

getcomputedstyle()

即使添加了边框与内边距，打印 style1.width 得到的结果依旧为 100px：

可见获取的仅仅是 css 属性中的 width 的值，与其它无关。

盒模型的影响

如果我再将 box1 的盒模型做出修改，改为 border-box：

#box1 {
  /* ...忽略之前的定义 */
  box-sizing: border-box;
}

此时，无论是通过 offsetwidth 还是 getboundingclientrect() 或是 getcomputedstyle()，它们获取到的关于 box1 宽度的结果，都为 100（或 100px）:

以上就是js动态获取元素宽高的几种方式的详细内容，更多关于js获取元素宽高的资料请关注代码网其它相关文章！

JS动态获取元素宽高的几种方式

2024年10月28日 • Javascript •我要评论