HTMLElement: anchorElement-Eigenschaft

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die anchorElement-Eigenschaft der HTMLElement-Schnittstelle gibt eine Referenz auf das Anker-Element des Elements zurück. Dies funktioniert nur bei Elementen, die über das HTML-Attribut anchor mit ihren Ankern verbunden sind, nicht bei Elementen, die über die CSS-Eigenschaften anchor-name und position-anchor mit ihren Ankern verbunden sind.

Wert

Eine Instanz von HTMLElement, die das Anker-Element des Elements darstellt, oder null, wenn es keines besitzt.

Beispiele

Grundlegende Nutzung

Dieses Beispiel verknüpft ein Element mit einem Anker in HTML und verwendet JavaScript, um eine Referenz auf das Anker-Element abzurufen.

HTML

Im HTML erstellen wir ein <div>-Element mit einer id von example-anchor. Dies wird unser Anker-Element sein. Dann fügen wir ein weiteres <div> mit einer Klasse infobox und einem anchor-Attribut hinzu, das auf example-anchor gesetzt ist. Dies bezeichnet das erste <div> als Anker des zweiten <div> und verbindet die beiden miteinander.

Wir fügen auch ein <p>-Element hinzu, um einige Ergebnisse auszugeben.

html
<div class="anchor" id="example-anchor">⚓︎</div>

<div class="infobox" anchor="example-anchor">
  <p>This is an information box.</p>
</div>

<p class="output"></p>

JavaScript

Wir verwenden JavaScript, um Referenzen auf das positionierte Element und das Ausgabeelement zu erhalten, und dann den Wert der anchorElement-Eigenschaft des positionierten Elements, um die damit verbundene id in die Ausgabe zu drucken. Dies zeigt, dass das Anker-Element tatsächlich das anchorElement des positionierten Elements ist.

js
const posElem = document.querySelector(".infobox");
const outputElem = document.querySelector(".output");

try {
  outputElem.textContent = `The positioned element's anchor element is the ${posElem.anchorElement.id}.`;
} catch (e) {
  outputElem.textContent = `Your browser doesn't support the anchorElement property.`;
}

Ergebnis

Das Ergebnis ist wie folgt.

Spezifikationen

Dieses Attribut ist derzeit nicht Teil der HTML-Spezifikation. Lesen Sie die Diskussion über die Hinzufügung der anchorElement-Eigenschaft unter https://github.com/whatwg/html/pull/9144.

Browser-Kompatibilität

Siehe auch