Get the Element's Actual Width and Height in JavaScript (original) (raw)

Last Updated : 22 May, 2026

In JavaScript, retrieving the width and height of an HTML element helps in creating dynamic and responsive web pages. It is commonly used for adjusting layouts, animations, and positioning elements accurately.

Allows developers to measure the actual size of HTML elements.
Useful for responsive design and dynamic content adjustments.
Common methods include offsetWidth, offsetHeight, and getBoundingClientRect().

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

**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: The offsetWidth and offsetHeight properties in JavaScript are used to get the actual width and height of HTML elements, including padding and borders. These properties help developers measure element dimensions accurately for dynamic web page behavior.

HTML `

offsetWidth and offsetHeight Example

<p id="paragraph">
    Computer Science Portal
</p>

<p id="widthHeight"></p>

<script>
    const header = document.getElementById("header");
    const paragraph = document.getElementById("paragraph");
    const widthHeight = document.getElementById("widthHeight");
    
    widthHeight.innerHTML =
        "Header Width: " + header.offsetWidth + "px" + "<br>" +
        "Header Height: " + header.offsetHeight + "px" + "<br>" +
        "Paragraph Width: " + paragraph.offsetWidth + "px" + "<br>" +
        "Paragraph Height: " + paragraph.offsetHeight + "px";
</script>

offsetWidth returns the width of an element in pixels.
offsetHeight returns the height of an element in pixels.
Commonly used with innerHTML to display element dimensions on a webpage.

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.

Approach 2 : Using **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: Here,it 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 `

Bounding Client Rect Example

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

Get the Element's Actual Width and Height in JavaScript (original) (raw)

**Approach 1: Using offsetWidth and offsetHeight Properties

**Uses:

**Syntax:

GeekforGeeks

Approach 2 : Using **getBoundingClientRect() method

**Syntax:

GeekforGeeks