HTML | DOM Style order Property - GeeksforGeeks

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.
Syntax:
To set the property:object.style.order = "number | initial | inherit"
object.style.order = "number | initial | inherit"
To get the property:object.style.orderReturn Values: It returns a String, value which represents the order property of an elementProperty 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 ChromeInternet Explorer 12.0FirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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:
<!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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?