Find the position of HTML elements in JavaScript

Now here, we learn about how to find the position of HTML elements through JavaScript. HTML Structure called DOM or(Document Object Model). also we find all HTML tag or Class or text through JavaScript and also edit HTML Format .

There are Two types of Selectors using to Select HTML DOM :- 1) Single element Selector :- In this selector we select single HTML element , 2) Multiple element Selector :- In this selector we select multiple HTML element .

some method of selector to select HTML element :

getElementById();
querySelector();
querySelectorAll();
getElementByClassName();
getElementByTagName();
getElementByName();

To Find Exact Position of HTML element use function getBoundingClientRect(); in JavaScript.

About getBoundingClientRect();

It is Predefine function in java script, it’s Return the selected HTML element Exact position in console
There are some Properties of this function like top(),bottom(),left(),right() and also Hight(),Wight() of selected element
Syntax:-
var varname =element.getBoundingClientRect();

Example of how to find HTML position Through JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Position of HTML Element</title>
</head>
<body>
        <div class="B" id="sec">
            Hello...! 
        
            <h3>Description about  CdeSpeedy</h3>
            <h5>Our office is located at Mradighi, Rejinagar, Murshidabad, West Bengal.
                            <br>
                CodeSpeedy started as a coding solution blogging platform in the year 2016 to help computer programmers, web developers and software developers.<br>Our blog posts contain articles and tutorials on Python, JavaScript, Swift, PHP, C++, CSS, WordPress, and much more</h5>
        </div>
    <script>
        console.log('Welcome...!');

        // Select the element whose position you want to find
        let element = document.getElementById('sec');
        
        // Get the position of the element relative to the viewport
        var A = element.getBoundingClientRect();

        // Output the position and size of the element
        console.log('Width: ' + A.width);
        console.log('Height: ' + A.height);
        console.log('Top: ' + A.top);
        console.log('Left: ' + A.left);
        console.log('Right: ' + A.right);
        console.log('Bottom: ' + A.bottom);
    </script>
</body>
</html>

here First Create HTML file. after in use div tag , give the id=sec & class=B in use h3,h5 tag, now here is html work is done

HTML output:-

Hello...!
Description about CdeSpeedy
Our office is located at Mradighi, Rejinagar, Murshidabad, West Bengal.
CodeSpeedy started as a coding solution blogging platform in the year 2016 to help computer programmers, 
web developers and software developers. Our blog posts contain articles and tutorials on Python,
JavaScript, Swift, PHP, C++, CSS, WordPress, and much more

now work in JavaScript …..,
select the element whose position you want to find . use getElementById(); method to select HTML element. after assign variable is A and use function getBoundingClientRect(); . and for the output of position & size of element use left, right, top, bottom.

Output:-

Welcome...!
task.html:27 Width: 1520
task.html:28 Height: 128.8874969482422
task.html:29 Top: 8
task.html:30 Left: 8
task.html:31 Right: 1528
task.html:32 Bottom: 136.8874969482422

About getBoundingClientRect();

Example of how to find HTML position Through JavaScript

Related Posts

Leave a Comment Cancel Reply