คุณสมบัติตัวนับรูปแบบ HTML DOM ใช้เพื่อเพิ่มหรือลดค่าของตัวนับ CSS หนึ่งตัวขึ้นไป โดยปกติจะใช้ร่วมกับคุณสมบัติการรีเซ็ตและเนื้อหา
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ counterIncrement -
object.style.counterIncrement = "none|id|initial|inherit"
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| ไม่มี | นี่คือค่าเริ่มต้นและตัวนับจะไม่เพิ่มขึ้น |
| idnumber | สำหรับการเพิ่มตัวนับสำหรับ id ที่ระบุโดยตัวเลขที่กำหนด ค่าการเพิ่มขึ้นเริ่มต้นคือ 1 และ 0 หรือค่าลบจะได้รับอนุญาตด้วย |
| ค่าเริ่มต้น | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติการนับ −
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
ul {
counter-reset: demo_var;
}
li::after {
counter-increment: demo_var 10;
content: " " counter(demo_var) ".";
}
</style>
<script>
function incrementCounterVal(){
document.getElementsByTagName("li")[0].style.counterIncrement="demo_var 2";
document.getElementById("Sample").innerHTML="The counter increment values is now increased by2";
}
</script>
</head>
<body>
<ul>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
<li>Demo =</li>
</ul>
<p>Increase the above list counter Increment value by clicking the below button</p>
<button onclick="incrementCounterVal()">Increase Counter Value</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เพิ่มมูลค่าตัวนับ ปุ่ม −
