The HTML DOM Style counterIncrement property is used to increase or decrease the value of one or more CSS counter. This is used together with counterReset and content property usually.
Following is the syntax for −
Setting the counterIncrement property −
object.style.counterIncrement = "none|id|initial|inherit"
The above property values are explained as follows −
| Value | Description |
|---|---|
| none | Thisis the default value and the counters are not incremented. |
| idnumber | Forincrementing the counter for the specific id by the given number.The default increment value is 1 and 0 or negative values are alsoallowed. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the counterIncrement property −
Example
<!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>Output
On clicking the “Increase Counter Value” button −
