ResizeObserverEntry: target 属性
target 是 ResizeObserverEntry 接口的一个只读属性，它返回对正在被观察的 Element 或 SVGElement 的引用。
值
一个 Element 或 SVGElement，表示正在被观察的元素。
示例
以下代码片段取自 resize-observer-border-radius.html（查看源码）示例。这个示例包含一个绿色的盒子，其大小是视口大小的百分比。当视口大小改变时，盒子的圆角会按比例改变。我们可以使用百分比的 border-radius 来实现这个功能，但这很快会导致难看的椭圆形角；而这个解决方案为你提供了漂亮的方形角，并且可以随盒子大小缩放。
为了获取被观察元素的引用，以便在每次更改后更新其 border-radius 值，我们使用了每个 entry 的 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 |
浏览器兼容性
加载中…