Document.elementFromPoint()

« document

Summary

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point.  To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

Syntax

var element = document.elementFromPoint(x, y);

where

  • element is an element object.
  • x and y specify the coordinates to check, in CSS pixels relative to the upper-left corner of the document's containing window or frame.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>

<script>
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

Notes

If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.

If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is null.

Note: Callers from XUL documents should wait until the onload event has fired before calling this method.

Specification

Document Tags and Contributors

Last updated by: teoli,
Hide Sidebar