คุณสมบัติ reversed ของ HTML DOM Ol

คุณสมบัติ reversed ของ HTML DOM Ol (Ordered List) ใช้สำหรับ อ่านหรือกำหนด ว่าลำดับของรายการควรเป็น น้อยไปมาก (descending) หรือ มากไปน้อย (ascending - ค่าเริ่มต้น)

ไวยากรณ์ (Syntax)

การอ่านค่า

olObject.reversed

การกำหนดค่า

olObject.reversed = booleanValue

ค่าที่เป็นไปได้ (booleanValue)

ตัวอย่างการใช้งาน

ตัวอย่างนี้เปลี่ยนลำดับรายการจาก ascending (1, 2, 3...) เป็น descending (6, 5, 4...)

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol reversed</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="button"] { border-radius: 10px; }
  ol{ width: 30%; margin: 0 auto; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-Ol-reversed</legend>
      <h3>Students</h3>
      <ol id="orderList">
        <li>Zampa</li>
        <li>Rajesh</li>
        <li>Eden</li>
        <li>Bina</li>
        <li>Alex</li>
        <li>Adam</li>
      </ol>
      <input type="button" onclick="reverseNumbering()" value="Correct list">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var studentList = document.getElementById("orderList");
  function reverseNumbering() {
    studentList.reversed = true;
    divDisplay.textContent = 'List Corrected';
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่ม "Correct List":

หลังกดปุ่ม "Correct List":