HTML - DOM Style Object counterIncrement Property

Quiz

HTML DOM Style Object counterIncrement property defines the number of counters to be increased on each occurrence of any selector.

Syntax

Set the counterIncrement property:

object.style.counterIncrement= "none | id number | initial | inherit";

Get the counterIncrement property:

object.style.counterIncrement;

Property Values

Value	Description
none	It is the default behavior which specifies no counters will be incremented.
id number	The id specifies which counter to be incremented and number sets the number of times counter to be incremented on each occurrence of selector. It's value can be 0 or negative, by default it' value is 1.
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 increment property of an element.

Example of HTML DOM Style Object 'counterIncrement' Property

The following example illustrates property to set the counter on h3 element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object counterIncrement Property
    </title>
    <style>
        h3 {
            counter-increment: level;
        }
        h3:before {
            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.counterIncrement = "sublevel";
        }
    </script>
</body>
</html>

Supported Browsers

Property
counterIncrement	Yes 2	Yes 12	Yes 1	Yes 3	Yes 9.2

html_dom.htm

Print Page