HTML | DOM Style counterReset Property

The Style counterReset property in HTML DOM is used to create or reset counters. This property is used with the counterincrement property and the content property.

Syntax:

  • It is used to return the counterReset property.
    object.style.counterReset
  • It is used to set the counterReset property.
    object.style.counterReset = "none|name|number|initial|inherit"

Property values



Value Description
none It is the default value no counter will be reset.
name It holds the name of the counter which counter will be reset.
number It holds the number which counter eill be reset.
initial Set this property to it’s default value.
inherit Inherits the property from it’s parent element.

Return Value:This method returns a string containing counter-increment property of element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML DOM Style counterReset Property
    </title>
      
    <style>
        p:before {
            counter-increment: subj;
            content: "Subject " counter(subj) ": ";
        }
    </style>
</head>
  
<body>
      
    <h1>GeeksforGeeks</h1>
      
    <h2>
        HTML DOM Style counterReset Property
    </h2>
      
    <button onclick = "myFunction()">
        Click Here!
    </button>
      
    <h2>Computer Science Subjects</h2>
      
    <p>Data Structure</p>
    <p>Algorithm</p>
    <p>Operating System</p>
    <p>Computer Networks</p>
      
    <script>
        function myFunction() {
            document.body.style.counterReset = "subj";
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Supported Browsers: The browser supported by DOM counterReset property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.