SVGAElement: interestForElement-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die interestForElement-Eigenschaft des SVGAElement-Interfaces ruft das Zielelement eines Interesse-Initiators ab oder setzt dieses, wenn das zugehörige <a>-Element als Interesse-Initiator festgelegt ist.
Siehe Erstellen eines Interesse-Initiators für weitere Details.
Wert
Ein Element-Objektinstanz oder null, wenn das zugehörige <a>-Element kein Zielelement gesetzt hat.
Beispiele
Grundlegende Nutzung von interestForElement
In diesem Beispiel verwenden wir die interestForElement-Eigenschaft eines SVG-<a>-Elements, um dessen Zielelement festzulegen und dann den tagName des Zielelements abzurufen. Der tagName wird dann in den Textinhalt des <a>-Elements aufgenommen.
HTML
Das Markup enthält ein SVG-<a>-Element mit einem <text>-Element, und der Linktext ist innerhalb des <text>-Elements enthalten. Es gibt auch ein HTML-<div>-Element. Wir verwandeln das <div>-Element in ein Popover, indem wir das Attribut popover darauf setzen.
<svg>
<a href="#">
<text x="90" y="20" text-anchor="middle">A link</text>
</a>
</svg>
<div id="mypopover" popover>I am a <code><div></code> element.</div>
JavaScript
Im Skript erhalten wir Referenzen zu den <a>, <text> und <div>-Elementen. Dann erstellen wir die Beziehung zwischen Interesse-Initiator und Ziel zwischen dem <a> und dem <div>, indem wir die interestForElement-Eigenschaft des <a>-Elements gleich einer Referenz auf das <div> setzen. Danach aktualisieren wir den <text>-Inhalt, um den tagName des Zielelements anzuzeigen, der über invoker.interestForElement.tagName abgerufen wird.
const invoker = document.querySelector("a");
const invokerText = document.querySelector("text");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invokerText.textContent = `My target is a ${invoker.interestForElement.tagName} element`;
Ergebnis
Das Beispiel wird so dargestellt:
Versuchen Sie, das Interesse an dem Link zu zeigen (zum Beispiel durch darüberfahren oder fokussieren), um das <div> sichtbar zu machen.