📘doc.elementFromPoint()

🔰 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";

📘 手冊

• Document ⟩ .elementFromPoint()

📗 參考

• JS.info ⟩ elementFromPoint(x, y)

👥 相關

• Element

• coordinates relative to viewport.