HTML DOM Style counterIncrement Thuộc tính

Thuộc tính HTML DOM Style counterIncrement được sử dụng để tăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS. Điều này thường được sử dụng cùng với counterReset và thuộc tính nội dung.

Sau đây là cú pháp cho -

Đặt thuộc tính counterIncrement -

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

Các giá trị thuộc tính trên được giải thích như sau -

Giá trị	Mô tả
không có	Đây là giá trị mặc định và các bộ đếm không được tăng dần.
idnumber	Tăng thêm bộ đếm cho id cụ thể theo số đã cho. Giá trị gia tăng mặc định là 1 và 0 hoặc các giá trị âm cũng được phép.
tên ban đầu	Đang xác nhận thuộc tính này về giá trị ban đầu.
kế thừa	Kế thừa giá trị thuộc tính mẹ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính counterIncrement -

Ví dụ

<!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="The counter increment values is now increased by2";
   }
</script>
</head>
<body>
   <ul>
      <li>Demo =</li>
      <li>Demo =</li>
      <li>Demo =</li>
      <li>Demo =</li>
      <li>Demo =</li>
      <li>Demo =</li>
   </ul>
   <p>Increase the above list counter Increment value by clicking the below button</p>
   <button onclick="incrementCounterVal()">Increase Counter Value</button>
   <p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style counterIncrement Thuộc tính

Khi nhấp vào nút “ Tăng giá trị bộ đếm Nút ”-

HTML DOM Style counterIncrement Thuộc tính