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.

target は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、監視対象の Element または SVGElement への参照を返します。

値

監視対象の要素を表す Element または SVGElement です。

次のスニペットは resize-observer-border-radius.html （ソースを表示）の例から取りました。この例では、ビューポートサイズに対するパーセント値でサイズ設定された緑色のボックスが含まれています。ビューポートサイズが変更されると、ボックスの丸みを帯びた角がボックスのサイズに比例して変更されます。パーセント値で border-radius を使用してこれを実装することもできますが、これではすぐに見苦しい楕円形の角になってしまいます。このソリューションでは、ボックスのサイズに比例した美しい四角形の角が得られます。

このように、変更するたびに border-radius の値を更新できるように、観測された要素への参照を取得するために、各エントリーの target プロパティ - entry.target.style.borderRadius を使用します。

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