คุณสมบัติ order ของ Style ใน HTML DOM

คุณสมบัติ order ของ HTML DOM Style ใช้สำหรับคืนค่าและแก้ไขลำดับของไอเทมแบบยืดหยุ่น (flexible item) เทียบกับไอเทมแบบยืดหยุ่นอื่นๆ ภายในคอนเทนเนอร์เดียวกันในเอกสาร HTML

ไวยากรณ์

1. การคืนค่า order

object.order

2. การแก้ไข order

object.order = "value"

ที่นี่ value สามารถเป็นได้ดังนี้:

ตัวอย่าง

<!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">ตัวอย่างคุณสมบัติ Style order ของ DOM</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">เปลี่ยนลำดับ</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>

ผลลัพธ์

คลิกปุ่ม "เปลี่ยนลำดับ" เพื่อเปลี่ยนลำดับของไอเทมแบบยืดหยุ่นภายในคอนเทนเนอร์ขอบ สีขาว