HTML DOM Style order Property

HTMLDOMWeb DevelopmentFront End Technology

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

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

raja
Published on 23-Sep-2019 15:11:31
Advertisements