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> 要素を記載します。

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報