Thuộc tính counterIncrement trong HTML DOM Style

Thuộc tính counterIncrement dùng để tăng hoặc giảm giá trị của một hoặc nhiều CSS counter. Dùng cùng counterReset và content.

Cú pháp

object.style.counterIncrement = "none|id number|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
none	Không tăng counter (mặc định)
id number	Tăng counter 'id' thêm 'number' (mặc định +1). Cho phép 0 hoặc âm
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>
  ul { counter-reset: demo_var; }
  li::after {
    counter-increment: demo_var 10;
    content: " " counter(demo_var) ".";
  }
</style>
<script>
  function incrementCounterVal() {
    document.getElementsByTagName("li")[0].style.counterIncrement = "demo_var 2";
    document.getElementById("Sample").innerHTML = "Giá trị counter increment đã tăng thêm 2";
  }
</script>
</head>
<body>
<ul>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
</ul>
<p>Tăng counter increment của danh sách trên bằng cách nhấn nút dưới đây</p>
<button onclick="incrementCounterVal()">Tăng Giá Trị Counter</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu: 10, 20, 30, 40, 50. Sau khi nhấn nút, phần tử li đầu tiên tăng 2 thay vì 10 → trở thành 2, các li sau vẫn +10: 12, 22, 32, 42.

Lưu ý: Ví dụ chỉ thay đổi li đầu tiên. Để thay đổi toàn bộ, cần áp dụng cho ul hoặc tất cả li.