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

javascript

← PrevNext →

Tools you can use

Even though it’s basic, new programmers often struggle to figure out the correct method to set the width and height of an element dynamically using plain JavaScript.

You can use the style property in JavaScript to set an element’s width, height, colour etc. You can use the same property to get or retrieve the elements CSS styles.

The style property returns a CSSStyleDeclaration object, which will have all the default or assigned attributes of an element. See the below image.

style property Example in JavaScript

Remember (and its important): The style property will only return inline style declarations of an element (when using element.style.get). Therefore, if you have defined styles to an element inside the <head> tag or in an external .css file, this property won’t return any value. I have explained it here.

Set width and height of Element using style property

Here’s an example that shows how you can dynamically set (or assign) width and height of an element using the style property.

<!DOCTYPE html>
<html>
<head>
    <title>Set Element width and height using JavaScript</title>
</head>

<body>
    <div style='
    	width: 150px;
    	border: solid 1px red;
        padding: 5px; 
        font: 15px Calibri;'
            onclick='changeWidth(this, "500px")'>
    	
        Content inside a DIV
    </div>
</body>
<script>
    function changeWidth(ele, wd) {
        ele.style.width = wd;
        ele.style.height = '50px';
    }
</script>
</html>
Try it

The <div> element in the above markup has a width (150px) defined inline. When I click the element, the script sets a new width and height.

Note that you have to set new width and height along with the unit value px or pixel, inside the single or double quotes.

ele.style.height = '50px';

Using style property to get inline style of an Element

The style property will only return inline style of an element. Inline CSS style applies to an element or when assigned using the style attribute like this.

<div style='border: solid 1px red;
    padding: 5px; 
    font: 15px Calibri;'>  <!--inline style declaration-->

This method will work fine.

<!DOCTYPE html>
<html>
<head>
    <title>Get Element width and height in JavaScript</title>
</head>

<body>
    <div style='
    	width: 200px;
        height: 50px;
    	border: solid 1px red;
        padding: 5px; 
        font: 15px Calibri;'
            onclick='getStyle(this)'>
    	
        Content inside a DIV
    </div>
</body>
<script>
    function getStyle(ele) {
        alert('width:' + ele.style.width + ' height: ' + ele.style.height);
    }
</script>
</html>
Try it

However, if you have declared the width and height of an element inside the <head> tag in your page, the style property will return nothing. See this example,

<!DOCTYPE html>
<html>
<head>
    <style>
    	div {
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div style='
    	border: solid 1px red;
        padding: 5px; 
        font: 15px Calibri;'
            onclick='getStyle(this)'>
    	
        Content inside a DIV
    </div>
</body>
<script>
    function getStyle(ele) {
        alert('width:' + ele.style.width + ' height: ' + ele.style.height);     // Will return nothing.
    }
</script>
</html>
Try it

Point of Interest

You may often be tempted to use the setAttribute() method to set an elements style attributes, such as the width. However, remember it will override all other style properties (inline or inside the <head> tag) of that element.

<script>
    function changeWidth(ele) {
        // Will assign a new width, but will override other style properties.
        ele.setAttribute('style', 'width:200px;');
    }
</script>
Try it

Therefore, if you only required setting a new width and height of an element, use the style property.

That’s it. Thanks for reading and happy coding.☺

← PreviousNext →