Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find position of HTML elements in JavaScript?
Overview
JavaScript provides various methods for the manipulation and to get the information about the HTML elements. From the several methods JavaScript has its own predefined methods which returns the specific coordinates or position of the HTML element. These two methods are offsetLeft and offsetTop, these two methods return the exact position of the HTML elements. JavaScript also provides another function as getBoundingClientRect() this method also provides the same result as the offset method. The getBoundingRect() has four properties as top, left, right and bottom and the offset has only two properties that are left and top.
Syntax
The Syntax to get the position of an element is −
getBoundingClientRect() − It is the predefined function of the JavaScript which when connected to the element returns the position of it with respect to the browser window. The getBoundingClientRect has four properties such as cords.top, cords.left, cords.bottom, cords.height, cords.height and cords.right. In which "cords" is the reference variable in which the getBoundingClientRect() function is stored.
var cords = e.getBoundingClientRect();
offsetType − The offset is a predefined function in JavaScript, it returns the position of the element such as offsetLeft and offsetTop.
"(" + elementHTML.offsetTop + "," + elementHTML.offsetLeft + ")"
Algorithm 1
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add a heading tag to the body.
<h1 id="h">tutorialspoint.com</h1>
Step 3 − Now create another div to display the Output as the position of the element.
<div id="ans">(0,0)</div>
Step 4 − Now add the script tag to the body.
<script></script>
Step 5 − Now store the reference of the element of which we have to find position.
var e = document.getElementById("h");
Step 6 − Now access the id name of the Output and use the innerHTML to display the position of the element by using the offsetTop and offsetLeft.
var m = document.getElementById("ans").innerHTML = "Position of element "+"(" + e.offsetTop + "," + e.offsetLeft + ")";
e.style.marginLeft = e.offsetLeft + 1;
Example 1
In this Example we will be using the basic offset method to find the position of the element.
<html>
<head>
<title> finding the element position </title>
</head>
<body>
<h1 id="h">tutorialspoint.com</h1>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<script>
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "Position of element "+"(" + e.offsetTop + "," + e.offsetLeft + ")";
e.style.marginLeft = e.offsetLeft + 1;
</script>
</body>
</html>
Algorithm 2
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add a heading tag to the body and add an id attribute to it with the name as "h".
<h1 id="h">tutorialspoint.com</h1>
Step 3 − Now create another div to display the Output as the position of the element.
<div id="ans">(0,0)</div>
Step 4 − Now add the script tag to the body.
<script></script>
Step 5 − Now store the reference of the element of which we have to find position.
var e = document.getElementById("h");
Step 6 − Now initialize the getBoundingClientTect() with the element of HTML and store the reference in a variable.
var cords = e.getBoundingClientRect();
Step 7 − Use the innerHTML method to display the position of an element to the browser window.
document.getElementById("ans").innerHTML = "Position of element "+"(" + cords.top + "," + cords.left + ")";
Example 2
In this Example we will be using the getBoundingClientRect() built in function to get the position of the HTML element.
<html>
<head>
<title> finding the elemet position </title>
</head>
<body>
<h1 id="h">tutorialspoint.com</h1>
<p> (using getBoundingClientRect) </p>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<script>
var e = document.getElementById("h");
var cords = e.getBoundingClientRect();
document.getElementById("ans").innerHTML = "Position of element "+"(" + cords.top + "," + cords.left + ")";
</script>
</body>
</html>
Algorithm 3
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add a heading tag to the body and set the position of the heading as absolute..
<h1 id="h" style="position:absolute;">tutorialspoint.com</h1>
Step 3 − Now create another div to display the Output as the position of the element.
<div id="ans">(0,0)</div>
Step 4 − Now create two buttons with the onclick event handler with the value as "down" and "right".
<button onclick="d()">Move down</button> <button onclick="r()">Move right</button>
Step 5 − Now add the script tag to the body.
<script></script>
Step 6 − Create an arrow function as d() and store the reference of the element of which we have to find position and use the further code below to make the dynamic position change display on the screen.
d = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginTop = e.offsetTop + 1;
}
Step 7 − Create another arrow function as r() and store the reference of the element of which we have to find position and use the further code below to make the dynamic position change display on the screen.
r = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginLeft = e.offsetLeft + 1;
}
Step 8 − The dynamic position finder is ready.
Example 3
In this Example we will be creating a movable text with the help of buttons, and will create a real time position changer in which as the user changes the position of the text the real time position will be displayed on the screen.
<html>
<head>
<title> finding the elemet position </title>
</head>
<body>
<h1 id="h" style="position:absolute;">tutorialspoint.com</h1>
<div id="ans" style="padding: 0.2rem;background-color: green;display: inline-block;color: white;">(0,0)</div>
<button onclick="d()">Move down</button>
<button onclick="r()">Move right</button>
<script>
d = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginTop = e.offsetTop + 1;
}
r = () => {
var e = document.getElementById("h");
var m = document.getElementById("ans").innerHTML = "(" + e.offsetTop + "," + e.offsetLeft + ")";
var e = document.getElementById("h");
e.style.marginLeft = e.offsetLeft + 1;
}
</script>
</body>
</html>
The below image shows the Output of the above Example, which on loading on the browser shows a real time position of an element with two buttons as move down and move right respectively. As the user clicks on the move down button the text "tutorialspoint.com" will shift downwards with the change in position value in the green section of the page. The text "tutorialspoint.com" is movable in nature. As in the below given image it shows a position (83,62) of the text "tutorialspoint.com".
Conclusion
The position coordinates of the element can be mostly used in JavaScript games. It is also used to add the scroll animation and the animation to the web page. For Example we want to add a certain animation when a user scrolls at a certain position of the page.
241 Views
