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 Falle von Elementen, die über das anchor-HTML-Attribut mit ihren Ankern verbunden sind, nicht bei Elementen, die über die CSS-Eigenschaften anchor-name und position-anchor mit ihren Ankern verknüpft sind.

Für detaillierte Informationen zu Ankerfunktionen und -nutzung siehe die Modul-Landingpage zu CSS-Ankerpositionierung und den Leitfaden zur Verwendung der CSS-Ankerpositionierung.

Wert

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel verbindet ein Element in HTML mit einem Anker und verwendet JavaScript, 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. Wir fügen dann ein weiteres <div> mit einer Klasse von infobox und einem anchor Attribut, das auf example-anchor gesetzt ist, hinzu. 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 drucken dann den Wert der id des mit der anchorElement-Eigenschaft des positionierten Elements verbundenen Ankerelements aus, um zu zeigen, dass das Ankerelement 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

BCD tables only load in the browser

Siehe auch