counterReset Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:counterReset

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. counterReset

Description

The counterReset property creates or resets one or more counters.

Property Values

Value Description
noneDefault value. No counters will be reset
nameThe name defines which counter that should be reset
number The number sets the value on each occurrence of the selector. The default value is 0
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the counter-increment property of an element
CSS VersionCSS2

Example

Change the counter-reset property:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {//www .  j a v a  2  s.  co m
    counter-increment: section;
    content: "Section " counter(section) ". ";
}
</style>
</head>
<body>

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

<h1>HTML Tutorials</h1>
<h1>JavaScript Tutorials</h1>
<h1>CSS Tutorials</h1>

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

</body>
</html>

Related Tutorials