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 Ankerelement des Elements zurück. Dies funktioniert nur im Fall von Elementen, die über das anchor HTML-Attribut mit ihren Ankern assoziiert sind, nicht für Elemente, die über die CSS-Eigenschaften anchor-name und position-anchor mit ihren Ankern verbunden sind.

Wert

Eine Instanz von HTMLElement, die das Ankerelement des Elements darstellt, oder null, wenn es keines hat.

Beispiele

Grundlegende Verwendung

In diesem Beispiel wird ein Element in HTML mit einem Anker verknüpft und JavaScript verwendet, um eine Referenz auf das Ankerelement abzurufen.

HTML

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

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 drucken dann den Wert der anchorElement-Eigenschaft des positionierten Elements aus, um zu zeigen, dass das Ankerelement das anchorElement des positionierten Elements ist.

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.

HTML anchor-Attribut
CSS-anchor-name und position-anchor-Eigenschaften
CSS-Anker-Positionierungsmodul