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:
- To set the property:
object.style.order = "number | initial | inherit"
- To get the property:
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:
html
<!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 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
Please Login to comment...