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