คุณสมบัติ counterReset ของ HTML DOM Style: รีเซ็ตตัวนับ CSS

คุณสมบัติ counterReset ใช้สำหรับสร้างหรือรีเซ็ต CSS Counter ให้เป็นค่าที่กำหนด ใช้ร่วมกับ counterIncrement และ content เพื่อสร้างหมายเลขอัตโนมัติ

ไวยากรณ์ (Syntax)

object.style.counterReset = "none|name number|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    counter-reset: demo_var;        /* สร้าง counter ชื่อ demo_var เริ่มที่ 0 */
  }
  li::after {
    counter-increment: demo_var 10; /* เพิ่ม 10 ทุก li */
    content: " " counter(demo_var) "."; /* แสดงค่า */
  }
</style>
<script>
  function changeCounterReset() {
    document.getElementsByTagName("ul")[0].style.counterReset = "demo_var";
    document.getElementById("Sample").innerHTML = "รีเซ็ต counter demo_var สำหรับ ul แล้ว";
  }
</script>
</head>
<body>
<ul>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
  <li>Demo =</li>
</ul>
<p>คลิกปุ่มเพื่อรีเซ็ตค่า counter ของรายการด้านบน</p>
<button onclick="changeCounterReset()">รีเซ็ต Counter</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: Demo = 10. Demo = 20. Demo = 30. Demo = 40. Demo = 50.
หลังคลิก: เริ่มนับใหม่จาก 10 (เพราะ increment 10)

การทำงานของ CSS Counters

/* Basic Counter */
ol {
  counter-reset: section;           /* สร้าง counter 'section' = 0 */
}
li::before {
  counter-increment: section;       /* เพิ่ม 1 */
  content: counter(section) ". ";   /* แสดง "1. ", "2. ", ... */
}

/* Nested Counters (1.1, 1.2, 2.1...) */
ol {
  counter-reset: section;
  list-style: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; /* ใช้ counters() สำหรับ nested */
}

/* Multiple Counters */
body {
  counter-reset: pages chapters figures;
}

คุณสมบัติที่เกี่ยวข้อง

การใช้งานจริง

• หมายเลขบท/หัวข้ออัตโนมัติ (1, 1.1, 1.1.1)
• หมายเลขรูปภาพ/ตาราง (Figure 1, Table 1)
• ลำดับรายการแบบกำหนดเอง
• Pagination, Breadcrumbs, Step indicators

การรองรับเบราว์เซอร์

รองรับทุกเบราว์เซอร์สมัยใหม่ (IE8+)