Open In App

HTML DOM Style maxWidth Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

maxWidth

 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:

maxWidth

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


Last Updated : 25 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads