HTML - DOM Style Object width Property

Quiz

HTML DOM Style Object width property sets or returns the width of an element. This property works only on block level element or element with absolute or fixed position.

Syntax

Set the width property:

object.style.width= "auto | length| percentage | initial | inherit";

Get the width property:

object.style.width;

Property Values

Value	Description
auto	It is the default value which lets browser set the width value.
length	It sets the width in length value.
percentage	It sets the width in percentage of the parent element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the width of the element.

Examples of HTML DOM Style Object 'width' Property

The following example sets and gets the width value of div element.

Set width Property of div Element

The following example sets the width of div element using length and percent values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object width Property
    </title>
    <style>
        #width {
            background-color: #04af2f;
            color: whitesmoke;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>
        Click to set width property.
    </p>
    <button onclick="funTwo()">
        Set Width
    </button>
    <button onclick="funThree()">
        Set Width %
    </button>
    <br><br>
    <p id="width">
        JavaScript is a lightweight, interpreted 
        programming language. It is commonly used 
        to create dynamic and interactive elements 
        in web applications.
    </p>
    <script>
        function funTwo() {
            document.getElementById("width")
                .style.width = "250px";
        }
        function funThree() {
            document.getElementById("width")
                .style.width = "30%";
        }
    </script>
</body>
</html>

Get width Value of div Element

The following example gets the width value of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object width Property
    </title>
    <style>
        #width {
            background-color: #04af2f;
            color: whitesmoke;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>
        Click to Get width values.
    </p>
    <button onclick="funTwo()">
        Get Width
    </button>
    <button onclick="funThree()">
        Get Width %
    </button>
    <br><br>
    <p id="res"></p>
    <p id="width">
        JavaScript is a lightweight, interpreted 
        programming language. It is commonly used 
        to create dynamic and interactive elements 
        in web applications.
    </p>
    <script>
        function funTwo() {
            let x=document.getElementById("width")
                .style.width = "250px";
            document.getElementById("res")
                .innerHTML="Width :" +x
        }
        function funThree() {
            let x=document.getElementById("width")
                .style.width = "30%";
            document.getElementById("res")
                .innerHTML="Width :" +x
        }
    </script>
</body>
</html>

Supported Browsers

Property
width	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page