In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > counterIncrement

counterIncrement style property

Browser support:

8

Specifies or retrieves the list of counters and increment values.

The value of this property is a space-delimited list of identifier-value pairs, where identifier is the name of a counter, and value defines how much the counter will be incremented by. The value is optional, its default value is 1.

You can define more than one identifier-value pair; in that case all counters specified with the identifiers will be modified at every occurrence of the element.
This property is useful if you want to generate the numbering with names like the header numbering mechanism in Microsoft Word. Use it together with the content and the counterReset properties to create automatic numbering.

Note: The counterIncrement property is supported in Internet Explorer from version 8.

This property doesn't take any effect if you change it dynamically in Safari before version 5.

Syntax:

object.counterIncrement;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: counter-increment

Possible values:

The type of this property is string.

One of the following values:

•

This value can be used arbitrary times (use the space character to separate them)

•

Values in this order (use the space character to separate them):

counter name

increment value (integer)

possible but not necessary; left to personal choice

•

none

•

inherit

Description of values:

counter name

String, the name of the counter.

increment value (integer)

Integer, the increment of the counter. If not specified, the increment value is 1.

inherit

Takes the value of this property from the computed style of the parent element.

none

Names of counters are not displayed.

Default: none.

Example HTML code 1:

This example illustrates the use of the counter-increment property:

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the counterIncrement property in JavaScript:

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
    <script type="text/javascript">
        function ChangeIncrement () {
            var section = document.getElementById ("sec1.2");

            if ('counterIncrement' in section.style) {
                section.style.counterIncrement = "chapter";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div id="sec1.2" class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>

    <br />
    <button onclick="ChangeIncrement ();">Change Increment</button>
    Click on the button to modify the counterIncrement value of the 'Second section in Chapter 1' element to chapter.
</body>