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
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 >
< 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 >
< 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
Last Updated :
05 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...