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.
<!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.
<!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
