HTML DOM Style order Property

The HTML DOM Style order property returns and modify the order of flexible item relative to the rest of the flexible item within the same container in an HTML document.

Syntax

Following is the syntax −

1. Returning order

object.order

2. Modifying order

object.order = “value”

Here, value can be −

Value	Explanation
initial	It set this property value to its default value.
inherit	It inherits this property value from its parent element.
number	It represents the number that specifies the order of the flexible item.

Let us see an example of HTML DOM Style order Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .container {
      border: 3px solid #fff;
      margin: 1rem auto;
      display: flex;
      padding: 2rem;
   }
   .box {
      width: 100px;
      height: 100px;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style order Property Demo</h1>
<div class="container">
<div class="box" id="b1" style="background-color:#7F055F;"></div>
<div class="box" id="b2" style="background-color:#3A015C;"></div>
<div class="box" id="b3" style="background-color:#177E89;"></div>
</div>
<button onclick="set()" class="btn">Change order</button>
<script>
   function set() {
      document.querySelector('#b1').style.order = "3";
      document.querySelector('#b2').style.order = "2";
      document.querySelector('#b3').style.order = "1";
   }
</script>
</body>
</html>

Output

HTML DOM Style order Property

Click on “Change order” button to change the order of flexible items inside the white border container.

HTML DOM Style order Property