Javascript Reference - HTML DOM Style counterIncrement Property

The counterIncrement property is usually used together with the counterReset property and the content property.

The counterIncrement property increments counter values.

Browser Support


`counterIncrement`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the counterIncrement property:

var v = object.style.counterIncrement

Set the counterIncrement property:

object.style.counterIncrement='none|id|initial|inherit'

Property Values

none: Default value. No counters will be incremented
id number: The id sets which counter to increment. The number sets the step that the counter will increment on each occurrence.
The default increment is 1.
0 or negative values, are allowed.
If the id refers to a not-initialized counter by counter-reset,
the default initial value is 0.
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	none
Return Value:	A string representing the counter-increment property
CSS Version	CSS2

Example

The following code shows how to change the counterIncrement property.


<!DOCTYPE html>
<html>
<head>
<style>
h1 {<!--from   ww  w .  j  a  va2 s  .  c  o  m-->
    counter-increment: section;
}

h1:before {
    content: "Section " counter(section) " ";
}
</style>
</head>
<body>

<h1>HTML</h1>
<h1 id="myH1">CSS</h1>
<h1>CSS3</h1>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myH1").style.counterIncrement = "subsection";
}
</script>

</body>
</html>

The code above is rendered as follows: