Thuộc tính order của Style trong HTML DOM

Thuộc tính order của Style trong HTML DOM trả về và cho phép sửa đổi thứ tự của một mục linh hoạt (flexible item) tương đối với các mục linh hoạt khác trong cùng một container trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

1. Lấy giá trị order

object.order

2. Thiết lập order

object.order = "value"

Ở đây, value có thể là:

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính order của Style:

<!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">Demo thuộc tính order của Style</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">Thay đổi thứ tự</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>

Kết quả

Nhấn vào nút "Thay đổi thứ tự" để thay đổi thứ tự các mục linh hoạt bên trong container viền trắng.