The HTML DOM Style counterReset property is used to reset a counter to a fixed value or to create one. This is used together with counterincrement property usually to increment or decrement a counter.
Following is the syntax for −
Setting the counterReset property −
object.style.counterReset = "none|name number|initial|inherit"
The above property values are explained as follows −
| Value | Description |
|---|---|
| none | Thisis the default value meaning no counters will be reset. |
| name | Itresets the counter with given name that should be reset |
| idnumber | Itresets the counter given by id to the value given by the number oneach selector occurrence. Its default reset value is 0. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the counterReset property −
Example
<!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>Output
On clicking the “Change counterReset” button −
