Skip to content
Related Articles

Related Articles

HTML | DOM Style width Property

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Aug, 2022

The Style width property in HTML DOM is used to set or return the width of an element which can be block-level elements or elements with fixed position. 

Syntax: 

  • It is used to return the width property:
object.style.width
  • It is used to set the width property:
object.style.width = "auto|length|%|initial|inherit"

Property Value Description

  • auto-This value automatically sets the default width value by the browser.
  • length-This value sets the width value in the specified length units.
  • %-Percentage value sets the width value in the specified percentage of the parent element’s width.
  • initial-This value sets the width property to its browser’s default value.
  • inherit-This value sets the width property to the value from its parent element.

Return Value: A String, representing the width of an element. 

Example 1: 

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        #GfG {
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <p>HTML|DOM Style Width Property:</p>
    <button onclick="myFunction()">Click here!</button>
    <div id="GfG">
        <h1>GfG</h1>
    </div>
    <script>
        function myFunction() {
            document.getElementById("GfG")
            .style.width = "500px";
        }
    </script>
</body>
</html>

Output:

  • Before click on the button: 

  • After click on the button: 

Example 2: 

html




<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML|DOM Style Width Property:</h2>
    <button type="button" id="myBtn"
            onclick="myFunction()">Click Here!</button>
    <script>
        function myFunction() {
            document.getElementById("myBtn")
            .style.width = "500px";
        }
    </script>
</body>
</html>

Output:

  • Before click on the button: 

  • After click on the button: 

Supported Browsers: The browser supported by DOM style width property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Safari 1
  • Opera 3.5

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!