How to find the position of HTML elements in JavaScript ?

Given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps steps to get the position:

Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is structured in a tree-like format known as DOM or Document Object Model. In JavaScript, there is an in-built object called the document object that points to the root of the DOM tree. It means that it is possible to access every component of the web page.

The document object has various methods available to find a particular element within the HTML page. Each of these methods has a parameter that could be used to find the required element. Some of the methods are:

  • The getElementsByTagName() Method
  • The getElementsByClassName() Method
  • The getElementById() Method
  • The getElementsByName() Method
  • The querySelector() Method
  • The querySelectorAll() Method

Step 2: Finding the position of the element: To get the location of any HTML element in the (x, y) coordinate format, there are two document properties which are used:

  • offsetTop Property: It returns the top position in pixels, relative to the top of the parent element. It includes the top position, and margin of the element and the top padding, scrollbar, and border of its parent element.

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <div id="target">
      
            <p>Click the button</p>
              
            <button onclick="getPoint()">
                Click
            </button>
              
            <p id="output"></p>
        </div>
      
        <script>
            function getPoint() {
                var target = document
                    .getElementById("target");
      
                var output = document
                    .getElementById("output");
      
                output.innerHTML = "offsetTop: "
                        + target.offsetTop;
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    offsetTop: 8
  • offsetLeft Property: It returns the left position in pixels, relative to the left of the parent element. It includes the left position, and margin of the element and the left padding, scrollbar, and border of its parent element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <div id="target">
            <p>Click the button </p>
      
            <button onclick="getPoint()">
                Click
            </button>
              
            <p id="output"></p>
        </div>
      
        <script>
            function getPoint() {
                var target = document
                    .getElementById("target");
      
                var output = document
                    .getElementById("output");
      
                output.innerHTML = "offsetLeft: "
                        + target.offsetLeft;
            }
        </script>
    </body>
      
    </html

    chevron_right

    
    

    Output:

    offsetLeft: 8
    

Combining both these properties into one to get the code for calculating the coordinates for an HTML element is given as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <div id="target">
          
        <p>
            Click the button to get the
            co-ordinate of the element
        </p>
  
        <button onclick="getPoint()">
            Get coordinate
        </button>
          
        <p id="output"></p>
    </div>
  
    <script>
        function getPoint() {
            var target = document
                .getElementById("target");
  
            var output = document
                .getElementById("output");
  
            output.innerHTML = 
                "Co-ordinate of the element:" +
                " (" + target.offsetLeft + ", "
                + target.offsetTop + ")";
        }
    </script>
</body>
  
</html

chevron_right


Output:
get-coords

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.