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: