Document.elementFromPoint()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La méthode elementFromPoint(), rattachée à l'interface Document, renvoie un objet Element correspondant à l'élément de plus haut niveau situé aux coordonnées indiquées en arguments (relativement à la zone d'affichage (viewport)).

Si l'élément placé au point indiqué appartient à un autre document (par exemple le document situé dans un élément <iframe>), c'est l'élément parent (par exemple l'élément <iframe> même) qui est renvoyé. Si l'élément situé au point indiqué est du contenu anonyme (par exemple les barres de défilement d'une boîte de texte), c'est le premier élément ancêtre non anonyme (par exemple la boîte de texte) qui est renvoyée.

Les éléments pour lesquels pointer-events vaut none seront ignorés et ce sera l'élément situé en dessous sera renvoyé.

Si la méthode est exécutée sur un autre document (par exemple dans le sous-document chargé dans un élément <iframe>), les coordonnées seront relatives au document où la méthode est appelée.

Si le point indiqué est situé en dehors des limites visibles du document ou que l'une des coordonnées est négative, le résultat fourni par la méthode sera null.

Pour connaître la position précise à l'intérieur de l'élément, on utilisera la méthode Document.caretPositionFromPoint().

Syntaxe

js
elementFromPoint(x, y);

Paramètres

x

L'abscisse du point relativement au bord gauche de la zone d'affichage (viewport) courante.

y

L'ordonnée du point relativement au bord haut de la zone d'affichage courante.

Valeur de retour

L'élément (l'objet Element) de plus haut niveau situé aux coordonnées indiquées.

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).

JavaScript

js
function changeColor(nouvelleCouleur) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = nouvelleCouleur;
}

La méthode changeColor() récupère l'élément situé au point indiqué puis modifie la valeur de la propriété color avec la nouvelle couleur passée en argument.

HTML

html
<p id="para1">Un texte ici</p>
<button onclick="changeColor('blue');">Bleu</button>
<button onclick="changeColor('red');">Rouge</button>

Ce fragment HTML fournit le paragraphe dont la couleur sera modifiée ainsi que deux boutons pour changer la couleur (un pour le bleu et l'autre pour le rouge).

Résultat

must be provided

Spécifications

Specification
CSSOM View Module
# dom-document-elementfrompoint

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
elementFromPoint

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi