HTML | DOM Style order Property

Last Updated : 01 Aug, 2019

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

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:

<!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>                    