HTML | DOM Style order Property
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
object.style.order = "number | initial | inherit"
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
