HTML DOM getBoundingClientRect() Method

Last Updated : 19 Sep, 2023

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>GeeksforGeeks</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>GeeksforGeeks</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>