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.

Approach: The offsetWidth and offsetHeight properties in JavaScript are used to retrieve the actual width and height of an HTML element. These properties are part of the element interface and are available for all HTML elements.

• The offsetWidth property returns the width of an element, including its padding and border, but not including its margin. The value is calculated in pixels and is read-only, meaning it cannot be changed.
• The offsetHeight property returns the height of an element, including its padding and border, but not including its margin. The value is calculated in pixels and is read-only, meaning it cannot be changed.

Uses: The actual width and height of an HTML element can be useful in a variety of scenarios, such as:

• Responsive Design: When building responsive web pages, you often need to determine the size of an element in order to adjust its layout and styling based on the size of the viewport.
• Image Cropping: If you have an image that you want to crop to a specific size, you can use the width and height properties to determine the aspect ratio and adjust the crop accordingly.
• Animation: When creating animations, you often need to determine the size of an element in order to calculate the position and velocity of objects.
• Positioning: If you want to position an element relative to another element, you can use the width and height properties to determine the size of both elements and position one element relative to the other.
• Scrolling: If you have an element that you want to scroll within a specific container, you can use the width and height properties to determine the size of the container and the element and adjust the scroll behavior accordingly.

Syntax:

const element = document.getElementById("HTML element");
console.log("Width: " + element.offsetWidth + "px");
console.log("Height: " + element.offsetHeight + "px");

Example 1:The following code demonstrates how you to use the offsetWidth and offsetHeight properties to retrieve the actual width and height of HTML elements. In this example, a <p> element with the id “widthHeight” is used to display the actual width and height of the h1 and p elements. The values are stored in the widthHeight variable, and the HTML DOM innerHTML property is used to insert the values into the p tag.

Output:

 

There are some limitations of using the offsetWidth and offsetHeight properties. The problem with this approach is that offsetWidth and offsetHeight are properties belonging to the element and not its style. So in some cases, they may return a value of 0 if you have modified the DOM element.

To overcome these limitations, you can use the getBoundingClientRect() method.

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

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.