HTML | DOM Style counterIncrement Property
The Style counterIncrement property in HTML DOM specifies how much the counter should be incremented on each occurrence of a selector. The Default value for an increment is 1.
Syntax:
- Return the counterIncrement property:
object.style.counterIncrement
- Set the counterIncrement property:
object.style.counterIncrement = "none|number|initial|inherit"
Property Values:
- None: It is the default value. This value does not reset the counter.
- Number: Sets an increment for the named counter each time the element appears. This increment can be zero, or even negative. The default value is 1 if not specified.
- Initial: Sets the element to its initial position.
- Inherit: The Element inherits its property from the parent element.
Example-1: Change counterIncrement Property.
html
<!DOCTYPE html> < html lang = "en" > < head > < title > HTML | DOM Style counterIncrement Property </ title > < style type = "text/css" > body { counter-reset: section; } h1 { color: green; } h2 { counter-increment: section; } h2:before { content: "Section " counter(section) ". "; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >JavaScript</ h2 > < h2 id = "h" >HTML</ h2 > < h2 >CSS </ h2 > < button onclick = "myFunction()" > Check </ button > < script > function myFunction() { document.getElementById( "h").style.counterIncrement = "subsection"; } </ script > </ body > </ html > |
Output:
Before:
After:
Example- 2: counterIncrement Property.
html
<!DOCTYPE html> < html lang = "en" > < head > < title > HTML | DOM Style counterIncrement Property </ title > < style type = "text/css" > body { counter-reset: section; } h1 { color: green; } h2 { counter-increment: section; } h2:before { content: "Section " counter(section) ". "; } h3:before { counter-increment: category; content: counter(section) "." counter(category) " "; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Javascript</ h2 > < h2 id = "h" >HTML</ h2 > < h2 id = "H" >CSS </ h2 > < h2 >References</ h2 > < h3 >HTML Tags</ h3 > < h3 >CSS Properties</ h3 > < button onclick = "myFunction()" >Check 1 </ button > < button onclick = "Function()" > Check 2 </ button > < script > function myFunction() { document.getElementById( "h").style.counterIncrement = "subsection"; } function Function() { document.getElementById( "H").style.counterIncrement = "subsection"; } </ script > </ body > </ html > |
Output:
Before:
After first check:
After second check:
Supported Browsers: The browser supported by HTML | DOM Style counter Increment Property are listed below:
- Google Chrome 2 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 1 and above
- Opera 9.2 and above
- Safari 3 and above
Contact Us