HTML DOM Style order Property
The HTML 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
- Set the order property.
object.style.order = "number | initial | inherit"
- Return the order property.
object.style.order
Return Values
It returns a String value that represents the order property of an element.
Property Values
- Number: Specifies the order for the flexible element. Default value is 0.
- Initial: Sets the property to its default value.
- Inherit: Inherits the property from its parent element.
Example: In this example, we will use the HTML DOM Style order Property to change the order of flexible element.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style order Property
</title>
<style>
#main {
width: 400px;
height: 140px;
border: 1px solid #000000;
display: flex;
margin-bottom: 20px;
}
#main div {
width: 200px;
height: 140px;
}
</style>
</head>
<body>
<h2>HTML DOM Style order Property</h2>
<div id="main">
<div style="background-color:rgb(12, 121, 133);" id="black"></div>
<div style="background-color:rgb(27, 104, 4);" id="white"></div>
</div>
<button onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("black").style.order = "2";
document.getElementById("white").style.order = "1";
}
</script>
</body>
</html>
Output:
Supported Browsers
- 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