counterIncrement Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:counterIncrement

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

Description

The counterIncrement property increments counter values.

Property Values

Value Description
none Default value. No counters will be incremented
id number which counter that should be incremented. The default increment is 1. 0 or negative values, are allowed.
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 counterIncrement property:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {//from  ww w . j  a v  a  2 s  .  co 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>

Related Tutorials