HTML - DOM Style Object counterReset Property

Quiz

HTML DOM Style Object counterReset property creates or reset the Counter. It is usually used with ounterIncrement property and the content property.

Syntax

Set the counterReset property:

object.style.counterReset= "none | name | number | initial | inherit";

Get the counterReset property:

object.style.counterReset;

Property Values

Value	Description
none	It is the default behavior which specifies no counters will be reset.
name	It specifies the name of the counter to be reset.
number	It defines the number of times counter to be set on each occurrence of selector. It's default value is 0.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents counter reset property of an element.

Example of HTML DOM Style Object 'counterReset' Property

The following example illustrates counterReset property applied on h3 element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object counterReset Property
    </title>
    <style>
        h3:before {
            counter-increment: level;
            content: "Level " counter(level) " ";
        }
    </style>
</head>
<body>
    <h3 id="inc">HTML DOM Tutorials</h3>
    <h3>HTML DOM Syle Object</h3>
    <h3>counterIncrement Property</h3>
    <h3>Example Code</h3>
    <button onclick="fun()">Click</button>
    <script>
        function fun() {
            document.getElementById("inc")
                .style.counterReset = "level";
        }
    </script>
</body>
</html>

Supported Browsers

Property
counterReset	Yes 2	Yes 12	Yes 1	Yes 3	Yes 9.2

html_dom.htm

Print Page