Document.elementFromPoint()

  • Revision slug: DOM/document.elementFromPoint
  • Revision title: document.elementFromPoint
  • Revision id: 101842
  • Created:
  • Creator: Ben Karel
  • Is current revision? No
  • Comment

Revision Content

{{ Fx_minversion_header("3") }} {{ DomRef() }}

Summary

Returns the element from the caller's document at the given point, relative to the upper-left-most point in the (possibly scrolled) window or frame.

Syntax

element = document.elementFromPoint(x, y);

where

  • element is an element object.
  • x and y specify the coordinates to check.

Example

<html>
<head>
<title>elementFromPoint example</title>

<script type="text/javascript">

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 calling document's DOM (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 parent 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


{{ languages( { "es": "es/DOM/document.elementFromPoint", "fr": "fr/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}

Revision Source

<p>
{{ Fx_minversion_header("3") }}
{{ DomRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns the element from the caller's document at the given point, relative to the upper-left-most point in the (possibly scrolled) window or frame.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>, <i>y</i>);
</pre>
<p>where
</p>
<ul><li> <code>element</code> is an <a href="en/DOM/element">element</a> object.
</li><li> <code>x</code> and <code>y</code> specify the coordinates to check.
</li></ul>
<h3 name="Example"> Example </h3>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;elementFromPoint example&lt;/title&gt;

&lt;script type="text/javascript"&gt;

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

&lt;body&gt;
&lt;p id="para1"&gt;Some text here&lt;/p&gt;
&lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
&lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the calling document's DOM (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 parent element (for example, the textbox) is returned.
</p><p>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>NULL</code>.
</p><p>{{ Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.") }}
</p>
<h3 name="Specification"> Specification </h3>
<ul><li> Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code>
</li></ul>
<p><br>
</p>
<div class="noinclude">
</div>
{{ languages( { "es": "es/DOM/document.elementFromPoint", "fr": "fr/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}
Revert to this revision