Javascript Reference - HTML DOM Style counterReset Property








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

The counterReset property creates or resets one or more counters.

Browser Support

counterReset Yes Yes Yes Yes Yes

Syntax

Return the counterReset property:

var v = object.style.counterReset 

Set the counterReset property:

object.style.counterReset='none|name number|initial|inherit'




Property Values

Value Description
none No counters will be reset. Default value
id number The id selects which counter to reset and number sets the value. The default reset value is 0
inherit Inherit the counter-reset property from the 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 counter-reset property:


<!DOCTYPE html>
<html>
<head>
<style>
h1:before {<!-- ww w . j av  a 2 s. co  m-->
    counter-increment: section;
    content: "Section " counter(section) ". ";
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<h1>A</h1>
<h1>B</h1>
<h1>C</h1>

<script>
function myFunction() {
    document.body.style.counterReset = "section";
}
</script>

</body>
</html>

The code above is rendered as follows: