Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style counterIncrement Property
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 −
Updated on: 23-Oct-2019
21 Views
Advertisements