Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

HTML | DOM Style order Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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. 


  • 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 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
Last Updated : 05 Jun, 2022
Like Article
Save Article
Similar Reads
Related Tutorials