HTMLElement: anchorElement プロパティ
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
anchorElement
は HTMLElement
インターフェイスのプロパティで、この要素のアンカー要素への参照を返します。これは、HTML の anchor
属性でアンカーに関連付けられた要素の場合にのみ動作し、CSS の anchor-name
および position-anchor
プロパティでアンカーに関連付けられた要素では動作しません。
アンカーの機能と使用法の詳細情報については、CSS アンカー位置指定モジュールのランディングページと CSS アンカー位置指定の使用のガイドを参照してください。
値
要素のアンカー要素を表す HTMLElement
インスタンス、またはアンカー要素を保有していない場合は null
です。
例
基本的な使い方
この例はHTMLで要素とアンカーを関連付け、JavaScript を使用してアンカー要素への参照を取得します。
HTML
HTML では、<div>
を作成し、id
を example-anchor
にします。これがアンカー要素となります。次に、もう一つの <div>
を作成し、クラスを infobox
に、anchor
属性を example-anchor
に設定します。これにより、最初の <div>
が 2 つ目の <div>
のアンカーとして指定され、2 つが関連付けられます。
また、結果を出力するために <p>
要素を記載します。
<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
であることを示します。
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 を参照してください。
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML
anchor
属性 - CSS
anchor-name
およびposition-anchor
プロパティ - CSS アンカー位置指定モジュール
- CSS アンカー位置指定の使用のガイド