Javascript DOM CSS Style counterIncrement Property

Introduction

Change the counterIncrement property: 

document.getElementById("myH1").style.counterIncrement = "subsection";

Click the button to change the counterIncrement of the second H1 element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {/* ww w .ja  v  a2 s  .  c o  m*/
  counter-increment: section;
}

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

<h1>HTML Tutorial</h1>
<h1 id="myH1">CSS Tutorial</h1>
<h1>JavaScripts Tutorial</h1>

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

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

</body>
</html>

The counterIncrement property increments one or more counter values.

The counterIncrement property works with the counterReset property and the content property.

Property Values

Value
 Description
none
 Default. No counters will be incremented
id number



 The id defines which counter that should be incremented.
The number sets how much the counter will increment on each occurrence of the selector.
The default increment is 1. 0 or negative values, are allowed.
If the id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
initial
 Sets this property to its default value.
inherit
 Inherits this property from its parent element.

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




PreviousNext

Related