Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng HTML DOM Ol

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

    .

    Tạo phần tử

      var olObject = document.createElement(“OL”)

      Ở đây, “olObject” có thể có các thuộc tính sau -

      Thuộc tính
      Mô tả
      đã đảo ngược
      Itsets / trả về thứ tự của danh sách có nên giảm dần theo thứ tự giảm dần hay không (mặc định)
      bắt đầu
      Itsets / trả về giá trị của thuộc tính bắt đầu của một danh sách có thứ tự
      loại
      Itsets / trả về giá trị của thuộc tính type của danh sách có thứ tự

      Hãy để chúng tôi xem một ví dụ về Ol start tài sản -

      Ví dụ

      <!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>Students</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="Correct list">
               <div id="divDisplay"></div>
            </fieldset>
         </form>
      <script>
         var divDisplay = document.getElementById("divDisplay");
         var studentList = document.getElementById("orderList");
         function reverseNumbering() {
            studentList.start = '1';
            divDisplay.textContent = 'List Corrected';
         }
      </script>
      </body>
      </html>

      Đầu ra

      Trước khi nhấp vào ‘Danh sách đúng’ nút -

      Đối tượng HTML DOM Ol

      Sau khi nhấp vào ‘Danh sách đúng’ nút -

      Đối tượng HTML DOM Ol