How to find the position of HTML elements in JavaScript ? - GeeksforGeeks

22 Dec, 2020
Given an HTML document and the task is to get the position of any element by using JavaScript. Use the following 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:  
html
<!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>
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:  
html
<!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>
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: 
html
<!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>
Output:  
 
bunnyram19
HTML-Misc
JavaScript-Misc
Picked
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React