Document : méthode elementFromPoint()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthode elementFromPoint() de l'interface Document retourne l'élément Element le plus haut situé aux coordonnées définies (relativement à la zone d'affichage).
Si l'élément au point défini appartient à un autre document (par exemple, le document d'un <iframe>), l'élément parent de ce document est retourné (l'élément <iframe> lui-même). Si l'élément au point donné est un contenu anonyme ou généré par XBL, comme les barres de défilement d'une zone de texte, alors le premier ancêtre non anonyme (par exemple, la zone de texte) est retourné.
Les éléments avec pointer-events défini à none seront ignorés, et l'élément situé en dessous sera retourné.
Si la méthode est exécutée sur un autre document (comme le sous-document d'un <iframe>), les coordonnées sont relatives au document où la méthode est appelée.
Si le point défini est en dehors des bornes visibles du document ou si l'une des coordonnées est négative, le résultat est null.
Si vous devez trouver la position exacte à l'intérieur de l'élément, utilisez Document.caretPositionFromPoint().
Syntaxe
elementFromPoint(x, y)
Paramètres
x-
La coordonnée horizontale d'un point, relative au bord gauche de la zone d'affichage actuelle.
y-
La coordonnée verticale d'un point, relative au bord haut de la zone d'affichage actuelle.
Valeur de retour
L'objet Element de plus haut niveau situé aux coordonnées définies.
Exemples
Dans cet exemple, on crée deux boutons qui permettent de définir la couleur du texte du paragraphe situé aux coordonnées (2, 2).
HTML
<p id="para1">Un texte ici</p>
<button>blue</button>
<button>red</button>
Le HTML fournit le paragraphe dont la couleur sera modifiée ainsi que deux boutons : l'un pour changer la couleur en bleu, et l'autre pour changer la couleur en rouge.
JavaScript
function changerCouleur(nouvelleCouleur) {
const elem = document.elementFromPoint(2, 2);
elem.style.color = nouvelleCouleur;
}
document.querySelectorAll("button").forEach((bouton) => {
bouton.addEventListener("click", (event) => {
changerCouleur(event.target.textContent.toLowerCase());
});
});
La méthode changerCouleur() obtient l'élément situé au point défini, puis définit la propriété color de premier plan de cet élément sur la couleur définie par le paramètre nouvelleCouleur.
Résultat
Spécifications
| Specification |
|---|
| CSSOM View Module # dom-document-elementfrompoint |
Compatibilité des navigateurs
Voir aussi
- La méthode
Document.elementsFromPoint()