The maxWidth property of HTML DOM sets/returns the maximum width of an element. The maxWidth property affects only block-level elements, absolute or fixed position elements.
Syntax:
- It returns the maxWidth property.
object.style.maxWidth- It sets the maxWidth Property.
object.style.maxWidth = "none | length | % | initial | inherit"Property Values:
| Value | Description |
|---|---|
| none | Default value without any limit on width of the element |
| length | Define width’s maximum value in length unit |
| % | Define width’s maximum value in % of the parent element |
| initial | Set property to its default value |
| inherit | Inherit from its parent element |
Return value: It return the maximum width of element.
Example 1: This example Sets the width in length unit.
html
<!DOCTYPE html><html>
<head>
<title>DOM Style maxWidth Property </title>
<style>
#GFG {
color: white;
width: 300px;
background: green;
margin: auto;
}
</style>
</head>
<body style="text-align: center;">
<h1 id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style maxWidth Property</h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Sets the width using length unit
document.getElementById("GFG")
.style.maxWidth = "220px";
}
</script>
</body>
</html>
|
Output:
Example 2: This example Sets the width value in ‘%’.
html
<!DOCTYPE html><html>
<head>
<title>DOM Style maxWidth Property </title>
<style>
#GFG {
color: white;
width: 22%;
background: green;
margin: auto;
}
</style>
</head>
<body style="text-align: center;">
<h1 id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style maxWidth Property</h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Sets the width using length unit
document.getElementById("GFG")
.style.maxWidth = "17%";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML DOM Style maxWidth Property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 7 and above
- Mozilla Firefox 1 and above
- Opera 4 and above
- Safari 1 and above