HTMLElement : propriété anchorElement
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété anchorElement de l'interface HTMLElement retourne une référence vers l'élément d'ancrage de l'élément. Cela fonctionne uniquement pour les éléments associés à leur ancre via l'attribut HTML anchor, et non pour les éléments associés à leur ancre via les propriétés CSS anchor-name et position-anchor.
Valeur
Une instance de HTMLElement représentant l'élément d'ancrage de l'élément, ou null s'il n'en possède pas.
Exemples
Utilisation simple
Cet exemple associe un élément à une ancre en HTML, et utilise JavaScript pour récupérer une référence vers l'élément d'ancrage.
HTML
Dans le HTML, nous créons un élément <div> avec un id égal à example-anchor. Ce sera notre élément d'ancrage. Nous ajoutons ensuite un autre <div> avec une classe infobox et un attribut anchor défini à example-anchor. Cela désigne le premier <div> comme l'ancre du second <div>, les associant ainsi.
Nous ajoutons également un élément <p> pour afficher le résultat.
<div class="anchor" id="example-anchor">⚓︎</div>
<div class="infobox" anchor="example-anchor">
<p>Ceci est une boîte d'information.</p>
</div>
<p class="output"></p>
JavaScript
Nous utilisons JavaScript pour obtenir des références vers l'élément positionné et l'élément d'affichage, puis nous affichons la valeur de l'attribut id de la propriété anchorElement de l'élément positionné, montrant que l'élément d'ancrage est bien l'anchorElement de l'élément positionné.
const posElem = document.querySelector(".infobox");
const outputElem = document.querySelector(".output");
try {
outputElem.textContent = `L'élément d'ancrage de l'élément positionné est ${posElem.anchorElement.id}.`;
} catch (e) {
outputElem.textContent = `Votre navigateur ne prend pas en charge la propriété anchorElement.`;
}
Résultat
Le résultat est le suivant.
Spécifications
Cet attribut ne fait actuellement pas partie de la spécification HTML. Lisez la discussion sur l'ajout de la propriété anchorElement sur https://github.com/whatwg/html/pull/9144 (angl.).
Compatibilité des navigateurs
Voir aussi
- L'attribut HTML
anchor - Les propriétés CSS
anchor-nameetposition-anchor - Le module CSS de positionnement d'ancre