HTML DOM Style order Property

Last Updated : 22 Apr, 2024

The HTML DOM Style order property specifies the order of a flexible element relative to the rest of the flexible elements inside the same container element.

Syntax

Set the order property.

object.style.order = "number | initial | inherit"

Return the order property.

object.style.order

Return Values

It returns a String value that represents the order property of an element.

Property Values

Number: Specifies the order for the flexible element. Default value is 0.
Initial: Sets the property to its default value.
Inherit: Inherits the property from its parent element.

Example: In this example, we will use the HTML DOM Style order Property to change the order of flexible element.

html

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style order Property
    </title>

    <style>
        #main {
            width: 400px;
            height: 140px;
            border: 1px solid #000000;
            display: flex;
            margin-bottom: 20px;
        }

        #main div {
            width: 200px;
            height: 140px;
        }
    </style>
</head>

<body>
    <h2>HTML DOM Style order Property</h2>

    <div id="main">
        <div style="background-color:rgb(12, 121, 133);" id="black"></div>
        <div style="background-color:rgb(27, 104, 4);" id="white"></div>
    </div>

    <button onclick="myFunction()">
        Click Here!
    </button>

    <script>
        function myFunction() {
            document.getElementById("black").style.order = "2";
            document.getElementById("white").style.order = "1";
        }
    </script>
</body>

</html>