Cách tạo hoặc đặt lại bộ đếm (counter) với JavaScript

Sử dụng thuộc tính counterReset để tạo mới hoặc đặt lại giá trị bộ đếm CSS về 0 (hoặc giá trị chỉ định). Thường áp dụng trên phần tử cha chứa các mục cần đánh số.

Ví dụ minh họa

Nhấn nút để đặt lại bộ đếm "section" trên body, khiến các h2 sau đó bắt đầu đếm từ 1:

<!DOCTYPE html>
<html>
<head>
  <style>
    h2:before {
      counter-increment: section;
      content: counter(section) " Quiz ";
    }
  </style>
</head>
<body>
  <h1>Các bài Quiz</h1>
  <p>Thay đổi counterIncrement</p>
  <h2>Ruby</h2>
  <h2 id="myID">Java</h2>
  <h2>PHP</h2>
  <h2>Perl</h2>
  <button onclick="display()">Đặt lại bộ đếm</button>
  <script>
    function display() {
      document.body.style.counterReset = "section";
    }
  </script>
</body>
</html>

Cú pháp counterReset

counterReset: none | name number | initial | inherit

• name: Tên bộ đếm cần reset
• number: Giá trị reset (mặc định 0)
• Có thể reset nhiều bộ đếm: counterReset: section 0 subsection 5

Mẹo: Kết hợp counterReset trên container cha và counterIncrement trên các mục con để tạo danh sách số tự động.