Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Đối tượng Ol trong HTML DOM

Đối tượng Ol trong HTML DOM đại diện cho phần tử <ol>.

Tạo phần tử <ol>

var olObject = document.createElement("OL")

Đối tượng "olObject" có thể có các thuộc tính sau:

Thuộc tính Mô tả
reversed Thiết lập/trả về việc thứ tự danh sách có nên giảm dần hay tăng dần (mặc định)
start Thiết lập/trả về giá trị của thuộc tính start của một danh sách có thứ tự
type Thiết lập/trả về giá trị của thuộc tính type của một danh sách có thứ tự

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính start của đối tượng Ol:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM Ol start</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-start</legend>
      <h3>Sinh viên</h3>
      <ol id="orderList" start='2'>
        <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="Sửa danh sách">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementById("orderList");
    function reverseNumbering() {
      studentList.start = '1';
      divDisplay.textContent = 'Đã sửa danh sách';
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn nút 'Sửa danh sách':

Đối tượng Ol trong HTML DOM

Sau khi nhấn nút 'Sửa danh sách':

Đối tượng Ol trong HTML DOM