Document.elementFromPoint()

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

elementFromPoint(x, y);

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

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