How to Get an HTML Element’s Width and Height in JavaScript

By the end of this page, you will understand the main ways to measure an HTML element’s width and height in JavaScript, when to use each property or method, and how those measurements affect tasks like centering an element in the viewport. You will also see common pitfalls, browser considerations, and practical examples for real projects.

Measuring an element’s size is a core part of DOM programming in JavaScript. When you want to center a popup, position a tooltip, animate layout, or respond to resizing, you often need the element’s actual rendered dimensions.

In the browser, an element can have several different “sizes” depending on what you mean:

• Content size: just the inner content area
• Client size: content + padding
• Offset size: content + padding + border
• Rendered rectangle: the element’s size and position as currently drawn on screen

Common APIs include:

• element.offsetWidth and element.offsetHeight
• element.clientWidth and element.clientHeight
• element.getBoundingClientRect()
• window.getComputedStyle(element) for reading CSS values

These matter because two widths that sound similar may produce different numbers. For example, if an element has padding and borders, clientWidth and offsetWidth will not match.

For centering, the most useful modern measurement is often getBoundingClientRect(), because it reflects the element’s rendered box. But offsetWidth and offsetHeight are also simple and widely used.

A key detail: if an element is hidden with display: none, many size properties return 0 because the browser is not rendering it in the layout.

Think of an HTML element like a framed picture on a wall:

• The content is the image itself.
• The padding is the empty space around the image.
• The border is the frame.
• The margin is the space between the picture frame and nearby pictures.

Different JavaScript properties measure different parts of that picture.

• clientWidth measures the image plus the empty space inside the frame.
• offsetWidth measures the image, the inner space, and the frame.
• getBoundingClientRect() measures the whole visible rectangle on the wall exactly as it appears.

So before measuring, ask: Which box do I actually need?

The most common ways to measure a DOM element are shown below.

1. offsetWidth and offsetHeight

These include:

• content
• padding
• border

They do not include margins.

const box = document.getElementById('box');

console.log(box.offsetWidth);
console.log(box.offsetHeight);

This is a simple choice when you want the element’s visible layout size.

2. clientWidth and clientHeight

These include:

• content
• padding

They do not include:

• border
• margin

const box = document.getElementById('box');

console.(box.);
.(box.);

Consider this example:

<div id="dialog">Centered box</div>

#dialog {
  position: fixed;
  width: 300px;
  padding: 20px;
  border: 4px solid black;
}

const dialog = document.getElementById('dialog');
const rect = dialog.getBoundingClientRect();

const x = (window.innerWidth - rect.width) / 2;
const y = (window.innerHeight - rect.height) / 2;

dialog.style.left = `${x}px`;
dialog.style.top = `${y}px`;

Here is what happens step by step:

Measuring element dimensions is common in many real applications.

Popups and modals

A modal dialog may need to be centered on screen after its content loads.

Tooltips and dropdowns

You often measure a button and a tooltip to position the tooltip above, below, or beside the button.

Drag-and-drop interfaces

Apps measure card, list, or container dimensions to detect overlap and drop zones.

Responsive UI adjustments

A script may reduce font size, switch layout, or reposition elements based on available space.

Virtualized lists and grids

Large apps measure row heights or card widths to render only visible items efficiently.

Canvas and media overlays

When drawing annotations over images or videos, the script may match overlay dimensions to the rendered element.

In real projects, developers usually do more than just read width and height once.

Common patterns

Guard clauses

Check that the element exists before measuring it.

const box = document.getElementById('box');
if (!box) return;

Measure after rendering

If content is loaded dynamically, measure only after the element is in the DOM and visible.

requestAnimationFrame(() => {
  const rect = box.getBoundingClientRect();
  console.log(rect.width, rect.height);
});

Recalculate on resize

If the viewport changes, centered positions may need updating.

function centerElement(el) {
  const rect = el.getBoundingClientRect();
  el.style.left = `${(window.innerWidth - rect.width) / }px`;
  el.. = ;
}

.(,  (modal));

Here are common mistakes beginners make when measuring element size.

1. Confusing width with rendered width

Broken example:

const styles = getComputedStyle(box);
console.log(styles.width);

Why this can be misleading:

• It returns a string like "200px"
• It may reflect CSS sizing rules rather than the box you want
• box-sizing changes what that width means

Better:

console.log(box.offsetWidth);

2. Measuring an element before it exists

Broken example:

const box = document.getElementById('box');
console.log(box.offsetWidth);

If the script runs before the element is parsed, box is .

Here is a practical comparison of the main measurement techniques.

// Includes padding + border
el.offsetWidth;
el.offsetHeight;

// Includes padding, excludes border
el.clientWidth;
el.clientHeight;

// Includes size + position relative to viewport
const rect = el.getBoundingClientRect();
rect.width;
rect.height;
rect.left;
rect.top;

// Reads computed CSS values as strings
const styles = getComputedStyle(el);
styles.width;
styles.height;
parseFloat(styles.width);

Quick rules

• offsetWidth = content + padding + border
• clientWidth = content + padding
• Margins are not included in these properties
• getBoundingClientRect() gives viewport-relative position and size
• Hidden elements with display: none often measure as 0
• getComputedStyle() returns strings, not numbers
• For simple centering, CSS transform: translate(-50%, -50%) is often easier

How do I get the actual width and height of a div in JavaScript?

Use offsetWidth and offsetHeight for a simple layout measurement, or getBoundingClientRect() for accurate rendered size and position.

What is the difference between clientWidth and offsetWidth?

clientWidth includes content and padding. offsetWidth includes content, padding, and border.

Does getBoundingClientRect() include borders?

Yes, it reflects the rendered border box of the element.

Why is my element width returning 0?

The element may be hidden with display: none, not yet added to the DOM, or measured before rendering is complete.

Can I use CSS instead of JavaScript to center an element?

Yes. In many cases, CSS is better:

position: fixed;
top: 50%;
left: 50%;
transform: translate(-, -);

• DOM manipulation — Measuring elements is part of working with the document structure in JavaScript.
• CSS box model — Width and height APIs make more sense when you understand content, padding, border, and margin.
• Viewport — Centering depends on the visible browser area, not just the document.
• Element positioning — Properties like top, left, absolute, and fixed are closely related to sizing and placement.
• getComputedStyle — Useful when you need CSS values instead of layout properties.
• ResizeObserver — Helps when you need to react to element size changes automatically.
• Responsive design — Element measurement is often used when adapting UI to different screen sizes.