ResizeObserverEntry.target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

ResizeObserverEntry 接口的只读属性 target 返回一个正在被监听的 Element 或 SVGElement 的引用。

值

一个正在被监听的 Element 或 SVGElement 元素。

示例

以下示例取自 resize-observer-border-radius.html （见源码）。这个示例包含绿色的盒子，大小按照视口大小的百分比变化。当视口的大小改变，盒子的圆角会和盒子的大小成比例的变化。我们可以使用百分比的形式来设置 border-radius，但是很快就得到了丑陋的椭圆形角；以下这个解决方案给你提供了漂亮的方形角，可以随盒子的大小缩放。

为了获取到被监听元素的引用，以便我们在每次更改后可以更新它的 border-radius 值，我们可以使用每个条目的 target 属性——entry.target.style.borderRadius。

js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentBoxSize.inlineSize / 10 +
          entry.contentBoxSize.blockSize / 10,
      )}px`;
    } else {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentRect.width / 10 + entry.contentRect.height / 10,
      )}px`;
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

规范

Specification
Resize Observer
# dom-resizeobserverentry-target

浏览器兼容性

BCD tables only load in the browser