ResizeObserverEntry：target 属性

target 是 ResizeObserverEntry 接口的只读属性，它返回对正在观察的 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"));

规范

规范
Resize Observer
# dom-resizeobserverentry-target

浏览器兼容性

BCD 表格仅在浏览器中加载