Javascript DOM CSS Style counterReset Property

Introduction

Change the counter-reset property: 

document.body.style.counterReset = "section";

Click the button to set the counter-reset property of the BODY element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {/*from ww  w.j av  a  2 s  . com*/
  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>

The counterReset property creates or resets one or more counters.

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

Property Values

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

The counterReset property returns a String representing the counter-increment property of an element.




PreviousNext

Related