HTML DOM getBoundingClientRect() Method

0 0 2 minutes read

The HTML DOM getBoundingClientRect() Method returns the relative positioning to the viewport. It returns 8 properties: left, top, right, bottom, x, y, width, and height. Scrolling will change the position value.

Syntax:

let rect = div.getBoundingClientRect();

Parameter: This method doesn’t accept any parameters.

Return Values: This method will return the DOMRect object that depicts the smallest rectangle containing the whole element, including its padding and border-width. The position and size of the rectangle can be described with the help of left, top, right, bottom, x, y, width, and height properties( in pixels ). Except for the width & height properties, the rest properties are relative to the top-left of the viewport.

Example: This example describes the basic usage of the getBoundingClientRect() Method in HTML DOM.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM getBoundingClientRect() Method 
    </title> 
  
    <style> 
        body { 
            margin-left: auto; 
            margin-right: auto; 
            width: 25%; 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        #DivEle { 
            height: 280px; 
            width: 380px; 
            margin-top: 10px; 
            overflow: auto; 
        } 
  
        #myDiv1 { 
            width: 350px; 
            height: 250px; 
            background-color: lightgreen; 
            border: 2px SOLID green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
    <h3>getBoundingClientRect() Method</h3> 
  
    <button onclick="myFunction()"> 
        GET POSITION 
    </button> 
  
    <div id="DivEle"> 
        <div id="myDiv1"> 
            Use scrollbar to change the position. 
        </div> 
        <div style="width:1080px; height:1080px; "> 
        </div> 
    </div> 
  
    <script> 
        function myFunction() { 
            var div = document.getElementById("myDiv1"); 
            var rectangle = div.getBoundingClientRect(); 
            x = rectangle.left; 
            y = rectangle.top; 
            w = rectangle.width; 
            h = rectangle.height; 
            alert("Left:" + x + ", Top:" + y + 
                ", Width:" + w + ", Height:" + h); 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: This is another example that illustrates the getBoundingClientRect() Method in HTML DOM.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            margin-left: auto; 
            margin-right: auto; 
            width: 25%; 
            text-align: center; 
        } 
  
        #ele { 
            width: 250px; 
            height: 150px; 
            padding: 16px; 
            border: 1px solid black; 
        } 
  
        #OuterBoundary { 
            height: 200px; 
            width: 300px; 
            overflow: auto; 
        } 
  
        img { 
            display: block; 
            margin-left: auto; 
            margin-right: auto; 
            width: 50%; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
    <h3>HTML DOM getBoundingClientRect() Method</h3> 
    <p id="display"></p> 
    <section onscroll="boundRect()" id="OuterBoundary"> 
        <section id="ele"> 
            <img src="GFG.jpeg" alt="gfg_img"> 
            <span> 
              Scroll to see the bounding client rect  
              for an element having border 
              </span> 
        </section> 
        <section style="width:580px;  
                        height:500px;"> 
      </section> 
    </section> 
  
    <script> 
        let boundRect = () => { 
            let element = document.getElementById("ele"); 
            let box = element.getBoundingClientRect(); 
  
            document.getElementById("display").innerHTML = 
                "Top: " + box.top.toFixed() +  
                " | Left: " + box.left.toFixed() +  
                " | Width: " + box.width +  
                " | Height: " + box.height; 
        } 
    </script> 
</body> 
  
</html>

Output:

Supported Browsers:

Chrome 2.0 and above
Edge 12 and above
Internet Explorer 4.0 and above
Firefox 3.0 and above
Opera 9.5 and above
Safari 4.0 and above

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!