ResizeObserverSize: blockSize 属性

Baseline 已广泛支持

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

ResizeObserverSize 接口的 blockSize 只读属性返回被观察元素边框盒在块维度上的长度。对于具有水平 writing-mode 的盒子,这是垂直维度或高度;如果 writing-mode 是垂直的,这是水平维度或宽度。

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

一个十进制数,表示块大小(以像素为单位)。

示例

在此示例中,我们使用 ResizeObserverEntry.contentBoxSize 返回一个包含大小信息的数组。blockSize 属性返回被观察元素的块维度大小。

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

resizeObserver.observe(divElem);

规范

规范
Resize Observer(调整大小观察器)
# dom-resizeobserversize-blocksize

浏览器兼容性