JavaScript에서 카운터(counter)를 생성하거나 재설정하려면 counterReset 속성을 사용하면 됩니다. CSS의 counter-increment 속성과 함께 활용하면 제목이나 문단 앞에 자동으로 번호를 붙이는 등 다양한 표현이 가능합니다.
아래 예제 코드를 직접 실행해 보면 JavaScript로 하나 이상의 카운터를 생성하거나 초기화하는 과정을 쉽게 이해할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
h2:before {
counter-increment: section;
content: counter(section) " Quiz ";
}
</style>
</head>
<body>
<h1>Quizzes</h1>
<p>Change the counterIncrement</p>
<h2>Ruby</h2>
<h2 id="myID">Java</h2>
<h2>PHP</h2>
<h2>Perl</h2>
<button onclick="display()">Reset Counter</button>
<script>
function display() {
document.body.style.counterReset = "section";
}
</script>
</body>
</html>위 코드에서는 h2:before 선택자에 counter-increment를 적용해 각 제목 앞에 "Quiz"라는 접미사가 붙은 번호가 자동으로 표시됩니다. 그리고 버튼을 클릭하면 display() 함수가 호출되어 document.body.style.counterReset 값이 설정되면서 카운터가 초기화됩니다.