HTML | DOM Style counterIncrement Property
Last Updated :
08 Aug, 2022
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 >GeeksForGeeks</ 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 >GeeksForGeeks</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...