Approach 2 : Using getBoundingClientRect() method

Approach 1: Using offsetWidth and offsetHeight Properties:

The getBoundingClientRect() method in JavaScript is another way to retrieve the actual width and height of an HTML element. This method returns a DOMRect object that represents the size of an element and its position relative to the viewport.

The DOMRect object has several properties that can be used to determine the size and position of an element, including:

left: The x-coordinate of the left edge of the element relative to the viewport.
top: The y-coordinate of the top edge of the element relative to the viewport.
right: The x-coordinate of the right edge of the element relative to the viewport.
bottom: The y-coordinate of the bottom edge of the element relative to the viewport.
width: The width of the element, including its padding, border, and scrollbar (if present).
height: The height of the element, including its padding, border, and scrollbar (if present).

Syntax:

const element = document.getElementById("HTML element");
const rect = element.getBoundingClientRect();
console.log("Width: " + rect.width + "px");
console.log("Height: " + rect.height + "px");

Example 2: Here’s an example code that demonstrates the use of the getBoundingClientRect() method. In this code, the getBoundingClientRect() method is used to get the size and position of the header and paragraph elements. The width, height, top, bottom, left, and right properties of the returned objects are then used to display the size and position of each element

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bounding Client Rect Example</title>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green" id="header">
        GeekforGeeks
    </h1>
     
    <p id="paragraph">
        Computer Science Portal
    </p>
 
    <p id="rectData"></p>
     
    <script>
        const header = document.getElementById("header");
        const paragraph = document.getElementById("paragraph");
        const rectData = document.getElementById("rectData");
        const headerRect = header.getBoundingClientRect();
        const paragraphRect = paragraph.getBoundingClientRect();
        rectData.innerHTML =
            "Header Width: " + headerRect.width + "px" + "<br>" +
            "Header Height: " + headerRect.height + "px" + "<br>" +
            "Header Top: " + headerRect.top + "px" + "<br>" +
            "Header Bottom: " + headerRect.bottom + "px" + "<br>" +
            "Header Left: " + headerRect.left + "px" + "<br>" +
            "Header Right: " + headerRect.right + "px" + "<br>" +
            "Paragraph Width: " + paragraphRect.width + "px" + "<br>" +
            "Paragraph Height: " + paragraphRect.height + "px" + "<br>" +
            "Paragraph Top: " + paragraphRect.top + "px" + "<br>" +
            "Paragraph Bottom: " + paragraphRect.bottom + "px" + "<br>" +
            "Paragraph Left: " + paragraphRect.left + "px" + "<br>" +
            "Paragraph Right: " + paragraphRect.right + "px";
    </script>
</body>
 
</html>

Output:

Conclusion:

Both the offsetWidth and offsetHeight properties and the getBoundingClientRect() method can be useful for determining the size of an HTML element, but the getBoundingClientRect() method provides a more complete representation of an element’s size and position, making it a better choice when accuracy is important.

How to get the element’s actual width and height in JavaScript ?

In JavaScript, it is often necessary to retrieve the actual width and height of an HTML element. This information can be useful in a variety of scenarios, such as setting the size of an element dynamically, centering an element on the page, or determining the size of an element for animation purposes.

Below are the approaches to get the element’s actual width and height in JavaScript:

Table of Content

Using offsetWidth and offsetHeight Properties
Using getBoundingClientRect() method

Tags:

#HTML-Questions #JavaScript-Questions #HTML #JavaScript #Web Technologies