Thuộc tính counterReset kiểu DOM trong HTML được sử dụng để đặt lại bộ đếm về một giá trị cố định hoặc để tạo một bộ đếm. Điều này được sử dụng cùng với thuộc tính countererincrement thường để tăng hoặc giảm một bộ đếm.
Sau đây là cú pháp cho -
Đặt thuộc tính counterReset -
object.style.counterReset = "none|name number|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 nghĩa là không có bộ đếm nào được đặt lại. |
| tên | Đặt lại bộ đếm với tên đã cho cần được đặt lại |
| idnumber | Nó đặt lại bộ đếm được cung cấp bởi id thành giá trị được cung cấp bởi số một mỗi lần xuất hiện của bộ chọn. Giá trị đặt lại mặc định của nó là 0. |
| 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ẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính counterReset -
Ví dụ
<!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="The counter reset value for unordered list is demo_var";
}
</script>
</head>
<body>
<ul>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
</ul>
<p>Change the above list counterReset value by clicking the below button</p>
<button onclick="changeCounterReset()">Change counterReset</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi thiết lập lại bộ đếm Nút ”-
