HTMLElement: anchorElement-Eigenschaft

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.

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

Wert

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

Beispiele

Grundlegende Nutzung

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. Dann fügen wir ein weiteres <div> mit einer Klasse infobox und einem anchor-Attribut hinzu, das auf example-anchor gesetzt ist. Dies bestimmt das erste <div> als den 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 sowohl auf das positionierte Element als auch auf das Ausgabeelement zu erhalten. Dann geben wir den Wert der anchorElement-Eigenschaft des positionierten Elements, die zugehörige id, in die Ausgabe und 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-Attribut anchor
CSS-Eigenschaften anchor-name und position-anchor
CSS-Ankerpositionierung-Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden