In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > elementFromPoint (document)

elementFromPoint method (document)

Browser support:

	3

Returns the element that is located at the specified coordinates.

The coordinates need to be relative to the top-left corner of the browser window's client area.

In old Opera (prior 10.5), Safari and Google Chrome versions, the coordinates need to be relative to the top-left corner of the document.

The elementFromPoint method is supported in Firefox from version 3.

The elementFromPoint method can be useful when you get the mouse coordinates through the event object. See the example below for details.

Be careful about the elementFromPoint method!
In Internet Explorer earlier than version 8, the elementFromPoint method requires the parameters in physical pixel size, while from version 8, it requires the coordinates in logical pixel size.
What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the elementFromPoint method works differently from version 8 than in earlier versions. The coordinates are required in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different. From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the coordinates are required in the current pixel size.
For example, if the zoom level is 200%, the elementFromPoint method requires two times greater values before version 8 than from version 8 for the same point.
Fortunately, the clientX and clientY properties of the event object work similarly to the elementFromPoint method. They retrieve the mouse coordinates in the default pixel size in Internet Explorer before version 8 and in the current pixel size from version 8. For further details, please see the pages for the clientX and clientY property.

In Internet Explorer, if you want to know what region of the element is located at the specified coordinates, use the componentFromPoint method.

Syntax:

object.elementFromPoint (X, Y);

You can find the related objects in the Supported by objects section below.

Parameters:

Required. Integer that specifies the X coordinate, in pixels.

Required. Integer that specifies the Y coordinate, in pixels.

Return value:

Returns the element at the specified position. When the mouse is over a TextNode element, the returned object is the parent element of the TextNode in Internet Explorer, Firefox, Google Chrome and Safari. In Opera, the returned value is the TextNode object.

Example HTML code 1:

This example illustrates the use of the elementFromPoint method:

<head>
    <script type="text/javascript">
        var selElem = null; // store the currently selected element
        var origBorder = "";    // stores the border settings of the selected element

        function OnMouseMove (event) {
            var posX = event.clientX, posY = event.clientY;

                // displays the coordinates used for the elementFromPoint method
            var info = document.getElementById ("info");
            info.innerHTML = event.clientX + ", " + event.clientY;

                // get the element that is located under the mouse 
            var overElem = document.elementFromPoint (posX, posY);

            if (overElem && overElem.tagName === undefined) {   // in case of text nodes (Opera)
                overElem = overElem.parentNode; // the parent node will be selected
            }

            if (selElem) {  // if there was previously selected element
                if (selElem == overElem) {  // if mouse is over the previously selected element
                    return; // does not need to update the selection border
                }
                selElem.style.border = origBorder;  // set border to the stored value
                selElem = null;
            }
                // the body and the html tag won't be selected
            if (overElem && overElem.tagName.toLowerCase () != "body" && overElem.tagName.toLowerCase () != "html") {
                selElem = overElem; // stores the selected element
                origBorder = overElem.style.border; // stores the border settings of the selected element
                overElem.style.border = "3px solid red";    // draws selection border
            }
        }
    </script>
</head>
<body onmousemove="OnMouseMove (event);">
    <div style="height:200px">This example also works when the document is scrolled.</div>
    <span>The current mouse position:</span>
    <span id="info" style="border:1px solid #606060; background-color:e0d0e0;"></span>
    <br /><br />
    <textarea rows="4">A selection border appears while the mouse is over this element.</textarea>
    <br /><br />
    <div style="height:100px">This example also works when the document is scrolled.</div>
</body>