SVGAElement: interestForElement プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
interestForElement は SVGAElement インターフェイスのプロパティで、関連付けられた <a> 要素が関心インボーカーとして指定されている場合に、関心インボーカーの対象要素を取得または設定します。
詳細については、関心インボーカーの作成 を参照してください。
値
Element オブジェクトインスタンス、または関連付けられた <a> 要素に対象要素が設定されていない場合は null。
例
基本的な interestForElement の使い方
この例では、SVG の <a> 要素の interestForElement プロパティを使用して対象要素を設定し、その後対象要素の tagName を取得します。取得した tagName は、<a> 要素のテキストコンテンツに記載されます。
HTML
マークアップには、<a> 要素と <text> 要素を含む SVG 要素があり、リンクテキストは <text> 要素内に記載されています。また HTML の <div> 要素も存在します。この <div> 要素に popover 属性を設定することで、ポップオーバーに変換します。
<svg>
<a href="#">
<text x="90" y="20" text-anchor="middle">リンク</text>
</a>
</svg>
<div id="mypopover" popover>これは <code><div></code> 要素です。</div>
JavaScript
スクリプト内で <a>、<text>、<div> 要素を参照します。次に、<a> 要素の interestForElement プロパティを <div> への参照に設定することで、<a> と <div> の間の関心インボーカー-ターゲット関係を作成します。その後、 invoker.interestForElement.tagName 経由で取得した対象要素の tagName を表示させるため、<text> コンテンツを更新します。
const invoker = document.querySelector("a");
const invokerText = document.querySelector("text");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invokerText.textContent = `ターゲットは ${invoker.interestForElement.tagName} 要素です`;
結果
この例は次のように表示されます。
リンクにカーソルを合わせるなどして関心を示すと、<div>が現れます。