HTML - DOM Style Object minWidth Property

Quiz

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

Syntax

Set the minWidth property:

object.style.minWidth= "length | percentage | initial | inherit";

Get the minWidth property:

object.style.minWidth;

Property Values

Value	Description
length	It specifies minimum width of element in length units.
percentage	It specifies minimum 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 min width of an element.

Examples of HTML DOM Style Object 'minWidth' Property

The following examples illustrates how to set and get the minimum width of div element.

Set Minimum Width of div Element

The following example sets minimum width of div element to 700px.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object minWidth Property
    </title>
    <style>
        #margin {
            border: 2px solid #04af2f;
            overflow: auto;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set minimum width.
    </h3>
    <button onclick="fun()">Set min width</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.minWidth = "700px";
        }
    </script>
</body>
</html>

Get Minimum Width of div Element

The following example gets the min width value of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object minWidth Property
    </title>
    <style>
        #margin {
            border: 2px solid #04af2f;
            overflow: auto;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set minimum width.
    </h3>
    <button onclick="fun()">Set min width</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.minWidth = "700px";
            document.getElementById("width")
                .innerHTML = "Min Width :" + x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
minWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page