JavaScript로 카운터를 증가시키려면 counterIncrement 속성을 사용하면 됩니다. 이 속성은 CSS 카운터의 증가 값을 설정하며, 하나 또는 여러 개의 카운터를 동시에 제어할 수 있습니다.
아래 예제 코드를 직접 실행해 보면서 카운터가 어떻게 증가하는지 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
counter-increment: section;
}
h2:before {
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()">Update Counter Increment</button>
<script>
function display() {
document.getElementById("myID").style.counterIncrement = "subsection";
}
</script>
</body>
</html>코드 설명
CSS 부분: counter-increment: section; 스타일은 모든 <h2> 요소가 나타날 때마다 'section' 카운터를 1씩 증가시킵니다. :before 가상 요소와 content 속성을 조합하면 각 제목 앞에 자동으로 번호가 표시됩니다.
JavaScript 부분: 버튼을 클릭하면 display() 함수가 실행되고, document.getElementById("myID")를 통해 특정 요소에 접근한 뒤 style.counterIncrement 속성을 변경합니다. 이렇게 하면 해당 요소의 카운터 증가 방식이 동적으로 바뀌게 됩니다.
이 기술을 활용하면 문서 내 목차 번호, 챕터 구분, 퀴즈 항목 번호 등을 별도의 수작업 없이 자동으로 관리할 수 있습니다.