Skip to content
Related Articles

Related Articles

HTML | DOM Style order Property

Improve Article
Save Article
  • Last Updated : 05 Jun, 2022
Improve Article
Save Article

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>                   

Output: 

  • Before the clicking of button:

 

  • After the clicking of button:

 

Supported Browser: The browser supported by HTML | DOM Style order Property are listed below:

  • Google Chrome 29  and above
  • Edge 12  and above
  • Internet Explorer 11.0  and above
  • Firefox 20  and above
  • Opera 12.1  and above
  • Safari 9  and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!