Skip to content
Related Articles

Related Articles

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>                    

    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
    • Internet Explorer 12.0
    • Firefox
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :