ResizeObserverSize

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2022 年 3 月起，它已在各浏览器中可用。

ResizeObserverSize 接口属于 Resize Observer API，它被 ResizeObserverEntry 接口用来访问被观察元素的盒模型尺寸属性。

注意：在多列布局这种分段上下文中，ResizeObserverSize 返回的尺寸将是第一列的尺寸。

实例属性

ResizeObserverSize.blockSize 只读: 被观察元素边框盒（border box）在块维度上的长度。对于具有水平 writing-mode 的盒子，这是垂直维度，即高度；如果 writing-mode 是垂直的，这是水平维度，即宽度。
ResizeObserverSize.inlineSize 只读: 被观察元素边框盒（border box）在行内维度上的长度。对于具有水平 writing-mode 的盒子，这是水平维度，即宽度；如果 writing-mode 是垂直的，这是垂直维度，即高度。

注意： 有关书写模式以及块维度和内联维度的更多解释，请阅读处理不同的文本方向。

示例

在此示例中，ResizeObserverEntry.contentBoxSize 属性返回一个 ResizeObserverSize 对象。这是一个数组，包含被观察元素内容盒（content box）的尺寸信息。

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentBoxSize[0]); // a ResizeObserverSize
  }
});

resizeObserver.observe(divElem);

规范

规范
Resize Observer（调整大小观察器） # resizeobserversize

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2024年12月19日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题