Thuộc tính counterReset trong HTML DOM Style

Thuộc tính counterReset dùng để đặt lại bộ đếm (counter) về giá trị cố định hoặc tạo bộ đếm mới. Thường dùng cùng counterIncrement và content để đánh số tự động.

Cú pháp

object.style.counterReset = "none|name number|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
none	Không reset counter nào (mặc định)
name	Tên counter cần reset
number	Giá trị reset (mặc định 0) tại mỗi lần selector xuất hiện
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  li::after {
    counter-increment: demo_var 10;
    content: " " counter(demo_var) ".";
  }
</style>
<script>
  function changeCounterReset() {
    document.getElementsByTagName("ul")[0].style.counterReset = "demo_var";
    document.getElementById("Sample").innerHTML = "Giá trị counter reset cho danh sách là demo_var";
  }
</script>
</head>
<body>
<ul>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
</ul>
<p>Thay đổi counterReset của danh sách trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeCounterReset()">Thay đổi counterReset</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu các li đánh số: 10, 20, 30, 40, 50 (tăng 10). Sau khi nhấn nút, counterReset đặt lại demo_var → các li bắt đầu lại từ 10, 20, 30... (vì counter-increment vẫn 10).

Ứng dụng: Tự động đánh số chương, mục, hình ảnh, bảng biểu trong tài liệu dài.