Skip to content
Related Articles

Related Articles

HTML | DOM Style order Property

Improve Article
Save Article
Like Article
  • Last Updated : 03 Nov, 2021

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.


  • To set the property: = "number | initial | inherit"
  • To get the property:

    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.


    <!DOCTYPE html>
    <!DOCTYPE html>
            HTML | DOM Style order Property
            #main {
                width: 180px;
                height: 90px;
                border: 1px solid #000000;
                display: flex;
            #main div {
                width: 90px;
                height: 90px;
        <!-- two div with different color. -->
        <div id="main">
            <div style="background-color:black;"
            <div style="background-color:white;"
                id="white">I am white.</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 -->
            function myFunction() {
                "black").style.order = "2";
                "white").style.order = "1";


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

    Start Your Coding Journey Now!