🔰 JS ⟩ browser ⟩ DOM ⟩ types ⟩ Document ⟩ methods ⟩ .elementFromPoint
returns the innermost (most deeply nested) and topmost (highest CSS z-index) element at that point (relative to the viewport).
the coordinates are relative to the viewport.
returns null if the point is out of viewport.
💾 replit: document.elementFromPoint()
// viewport
const viewport = {
// .width, .height
width : window.innerWidth,
height: window.innerHeight,
// .center
get center() {
const x = this.width / 2;
const y = this.height / 2;
return {
x: x, y: y, // `.center` as object {x:y:}
coords: [x, y], // `.center.coords` as array [x,y]
}
},
};
// select element at the center of the viewport
let elem = document.elementFromPoint(...viewport.center.coords);
elem.style.background = "red";