Skip to main content

How to Set the Width and Height of an Element in JavaScript

Programmatically setting the dimensions of a DOM element is a fundamental task for creating dynamic layouts, animations, and interactive components. The standard and most direct way to do this is by manipulating the element's style property.

This guide will teach you how to correctly set the width and height of an element, explain the crucial importance of including CSS units, and cover the common pitfall of trying to size an inline element.

The Core Method: The element.style Property​

The element.style object provides direct access to an element's inline styles. You can set the width and height by assigning a string value to the corresponding properties.

Problem: you have a div element and you want to set its width and height using JavaScript.

<div id="my-box" style="background-color: salmon;">Box Content</div>

Solution:

// 1. Select the element.
const box = document.getElementById('my-box');

// 2. Set the width and height properties on its `style` object.
box.style.width = '200px';
box.style.height = '150px';
note

After this code runs, the element's style attribute in the DOM will be updated to style="background-color: salmon; width: 200px; height: 150px;".

The Importance of CSS Units (px, %, rem, etc.)​

This is the most common point of failure for beginners. When you set a dimensional property in CSS (like width, height, margin, padding, etc.), you must provide a unit. The value must be a string, not a number.

Example of incorrect code:

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

// ⛔️ INCORRECT: This will have no effect.
box.style.width = 200; 

// The browser does not know if you mean 200 pixels, 200 percent, or something else.
console.log(box.style.width); // Output: "" (The style was not set)

Solution: always append a valid CSS unit to your number to create a string. For a fixed size, px (pixels) is the most common unit.

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

// ✅ CORRECT: Provide a string with a unit.
box.style.width = '200px';
box.style.height = '50%';

A Common Pitfall: Sizing inline Elements​

By default, the width and height properties have no effect on elements with a display value of inline, such as <span>, <a>, or <strong>. The dimensions of these elements are determined by their content.

Example of incorrect code:

<span id="my-span" style="background-color: lightblue;">This is a span.</span>
const mySpan = document.getElementById('my-span');

// ⛔️ This will have no visible effect.
mySpan.style.width = '300px';
mySpan.style.height = '100px';

The span's background will still only be as large as its text content.

Solution: to be able to set a width and height, you must change the element's display property to a value that respects these dimensions, such as block or inline-block.

const mySpan = document.getElementById('my-span');

// Change the display property to allow width and height to be set.
mySpan.style.display = 'inline-block'; 

// Now, these assignments will work.
mySpan.style.width = '300px';
mySpan.style.height = '100px';

Setting Dimensions on Multiple Elements​

If you need to apply the same dimensions to multiple elements, you can select them all with querySelectorAll() and then iterate over the resulting NodeList.

Solution: this example sets the width and height for every element with the class thumbnail.

<img class="thumbnail" src="...">
<img class="thumbnail" src="...">
const thumbnails = document.querySelectorAll('.thumbnail');

thumbnails.forEach(thumb => {
  thumb.style.width = '150px';
  thumb.style.height = '150px';
});

Conclusion​

Setting the width and height of an element in JavaScript is a simple task that revolves around the style object.

  • The recommended best practice is to set the properties directly on the element.style object: element.style.width = '200px';.
  • Always include a CSS unit (like px or %) in the string value. Assigning a raw number will not work.
  • Remember that width and height have no effect on inline elements. You must change the display property to block or inline-block first.

Table of Contents