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>