The Style counterReset property in HTML DOM is used to create or reset counters. This property is used with the counterincrement property and the content property.
Syntax:
- It is used to return the counterReset property.
object.style.counterReset
- It is used to set the counterReset property.
object.style.counterReset = "none|name|number|initial|inherit"
Property values
| Value | Description |
|---|---|
| none | It is the default value no counter will be reset. |
| name | It holds the name of the counter which counter will be reset. |
| number | It holds the number which counter will be reset. |
| initial | Set this property to it’s default value. |
| inherit | Inherits the property from it’s parent element. |
Return Value:This method returns a string containing counter-increment property of element.
Example:
html
<!DOCTYPE html><html>
<head>
<title>
HTML DOM Style counterReset Property
</title>
<style>
p:before {
counter-increment: subj;
content: "Subject " counter(subj) ": ";
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML DOM Style counterReset Property
</h2>
<button onclick = "myFunction()">
Click Here!
</button>
<h2>Computer Science Subjects</h2>
<p>Data Structure</p>
<p>Algorithm</p>
<p>Operating System</p>
<p>Computer Networks</p>
<script>
function myFunction() {
document.body.style.counterReset = "subj";
}
</script>
</body>
</html>
|
Output:
Before click on the button:
After click on the button:
Supported Browsers: The browser supported by DOM counterReset property are listed below:
- Google Chrome 2
- Edge 12
- Internet Explorer 8
- Firefox 1
- Opera 9.2
- Safari 3