Document.elementFromPoint()

  • Revision slug: DOM/document.elementFromPoint
  • Revision title: document.elementFromPoint
  • Revision id: 101841
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[es:DOM:document.elementFromPoint]] <<langbot>>

Revision Content

{{template.Fx_minversion_header(3)}} {{template.DomRef()}}

Summary

Returns the element visible at the given point, which is specified relative to the top left visible point in the document.

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 portion of the document or either coordinate is negative, the result is NULL.

{{template.Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}

Specification


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

Revision Source

<p>
{{template.Fx_minversion_header(3)}}
{{template.DomRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns the element visible at the given point, which is specified relative to the top left visible point in the document.
</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 portion of the document or either coordinate is negative, the result is <code>NULL</code>.
</p><p>{{template.Note("Callers from XUL documents should wait until the &lt;code&gt;onload&lt;/code&gt; 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>
{{ wiki.languages( { "es": "es/DOM/document.elementFromPoint", "fr": "fr/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}
Revert to this revision