HTMLElement: anchorElement プロパティ

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

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

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

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

値

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

例

基本的な使い方

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

HTML

HTML では、

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

また、結果を出力するために

要素を記載します。

html
⚓︎




  
これは情報ボックスです。

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 を参照してください。

ブラウザーの互換性

関連情報