Approach 1 Using offsetWidth and offsetHeight Properties

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:

• 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 use the offsetWidth and offsetHeight properties to retrieve the actual width and height of HTML elements. In this example, an <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.

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: