HTML | DOM Style width Property
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
Last Updated :
05 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...