HTML - DOM Style Object maxWidth Property

Quiz

HTML DOM Style Object maxWidth property sets or returns the maximum width of an element. It only affects block-level elements or elements with fixed or absolute positioning.

Syntax

Set the maxWidth property:

object.style.maxWidth= "none | length | percentage | initial | inherit";

Get the maxWidth property:

object.style.maxWidth;

Property Values

Value	Description
none	It is the default value which does not set any limit on maximum width.
length	It specifies maximum width of element in length units.
percentage	It specifies maximum 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 max width of an element.

Examples of HTML DOM Style Object 'maxWidth' Property

The following examples illustrates to set maximum width of div element.

Set Max width of div Element

The following example sets maximum width of div element using length and percentage property value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object maxWidth Property
    </title>
</head>
<body>
    <h3>
        Click to set maximum width.
    </h3>
    <button onclick="fun()">Set Max width</button>
    <button onclick="funTwo()">
        Set Max width in Percentage
    </button>
    <br>
    <div id="margin">
        <p>
            CSS is the acronym for "Cascading 
            Style Sheet". It's a style sheet 
            language used for describing the 
            presentation of a document written 
            in a markup language like HTML. 
        </p>
        <p>
            CSS helps the web developers to 
            control the layout and other visual 
            aspects of the web pages. CSS plays 
            a crucial role in modern web development 
            by providing the tools necessary to 
            create visually appealing, accessible,
            and responsive websites.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("margin")
                .style.maxWidth = "150px";
        }
        function funTwo() {
            document.getElementById("margin")
                .style.maxWidth = "40%";
        }
    </script>
</body>
</html>

Get Max width of div Element

The following example gets maximum width of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object maxWidth Property
    </title>
</head>
<body>
    <h3>
        Click to set maximum width.
    </h3>
    <button onclick="fun()">Get Max width</button>
    <button onclick="funTwo()">
        Set Max width in Percentage
    </button>
    <br>
    <p id="width"></p>
    <div id="margin">
        <p>
            CSS is the acronym for "Cascading
            Style Sheet". It's a style sheet
            language used for describing the
            presentation of a document written
            in a markup language like HTML.
        </p>
        <p>
            CSS helps the web developers to
            control the layout and other visual
            aspects of the web pages. CSS plays
            a crucial role in modern web development
            by providing the tools necessary to
            create visually appealing, accessible,
            and responsive websites.
        </p>
    </div>
    <script>
        function fun() {
            let x = document.getElementById("margin")
                .style.maxWidth = "150px";
            document.getElementById("width")
                .innerHTML = "Max Width :" + x;
        }
        function funTwo() {
            let x = document.getElementById("margin")
                .style.maxWidth = "40%";
            document.getElementById("width")
                .innerHTML = "Max Width :" + x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
maxWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page