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:
object.style.order = "number | initial | inherit"
object.style.order
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