HTMLElement: anchorElement プロパティ

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

anchorElementHTMLElement インターフェイスのプロパティで、この要素のアンカー要素への参照を返します。これは、HTML の anchor 属性でアンカーに関連付けられた要素の場合にのみ動作し、CSS の anchor-name および position-anchor プロパティでアンカーに関連付けられた要素では動作しません。

アンカーの機能と使用法の詳細情報については、CSS アンカー位置指定モジュールのランディングページと CSS アンカー位置指定の使用のガイドを参照してください。

要素のアンカー要素を表す HTMLElement インスタンス、またはアンカー要素を保有していない場合は null です。

基本的な使い方

この例はHTMLで要素とアンカーを関連付け、JavaScript を使用してアンカー要素への参照を取得します。

HTML

HTML では、<div> を作成し、idexample-anchor にします。これがアンカー要素となります。次に、もう一つの <div> を作成し、クラスを infobox に、anchor 属性を example-anchor に設定します。これにより、最初の <div> が 2 つ目の <div> のアンカーとして指定され、2 つが関連付けられます。

また、結果を出力するために <p> 要素を記載します。

html
<div class="anchor" id="example-anchor">⚓︎</div>

<div class="infobox" anchor="example-anchor">
  <p>これは情報ボックスです。</p>
</div>

<p class="output"></p>

JavaScript

JavaScript を使用して位置指定要素と出力要素の参照を取得し、位置指定要素の anchorElement プロパティに関連付けられた id の値を output に表示させ、アンカー要素が位置指定要素の anchorElement であることを示します。

js
const posElem = document.querySelector(".infobox");
const outputElem = document.querySelector(".output");

try {
  outputElem.textContent = `位置指定要素のアンカー要素は ${posElem.anchorElement.id} です。`;
} catch (e) {
  outputElem.textContent = `このブラウザーは anchorElement プロパティに対応していません。`;
}

結果

結果は次のようになります。

仕様書

この属性は現在 HTML の仕様書には属していません。anchorElement プロパティの追加に関する議論は https://github.com/whatwg/html/pull/9144 を参照してください。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
anchorElement
ExperimentalNon-standard

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
User must explicitly enable this feature.

関連情報