Skip to content
Related Articles

Related Articles

HTML | DOM Style counterIncrement Property
  • Difficulty Level : Basic
  • Last Updated : 12 Feb, 2021

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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :