HTML | DOM Style order Property

Last Updated : 05 Jun, 2022

The 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:

To set the property:

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

To get the property:

object.style.order

Return Values: It returns a String, value which represents the order property of an element

Property Values:

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

Example:

html

<!DOCTYPE html>
<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style order Property
    </title>
    <style>
        #main {
            width: 180px;
            height: 90px;
            border: 1px solid #000000;
            display: flex;
        }
         
        #main div {
            width: 90px;
            height: 90px;
        }
    </style>
</head>
 
<body>
     
 
    <!-- two div with different color. -->
    <div id="main">
        <div style="background-color:black;"
            id="black"></div>
        <div style="background-color:white;"
            id="white">I am white.</div>
        </div>
 
    <p>Click the button below to change 
    the order of the four DIV's:</p>
 
    <button onclick="myFunction()">CLICK</button>
 
 
    <!-- Change order of div -->
    <script>
        function myFunction() {
            document.getElementById(
            "black").style.order = "2";
            document.getElementById(
            "white").style.order = "1";
        }
    </script>
 
</body>
 
</html>                    