Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style order Property

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


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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