HTML DOM Style counterIncrement प्रॉपर्टी का उपयोग एक या अधिक CSS काउंटर के मान को बढ़ाने या घटाने के लिए किया जाता है। इसका उपयोग आमतौर पर काउंटर रीसेट और सामग्री संपत्ति के साथ किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैकाउंटरइन्क्रिमेंट प्रॉपर्टी सेट करना -
object.style.counterIncrement = "none|id|initial|inherit"
उपरोक्त संपत्ति मूल्यों को इस प्रकार समझाया गया है -
| मान <वें>विवरण | |
|---|---|
| कोई नहीं | यह डिफ़ॉल्ट मान है और काउंटरों में वृद्धि नहीं की जाती है। |
| idnumber | दी गई संख्या से विशिष्ट आईडी के लिए काउंटर को बढ़ाने के लिए। डिफ़ॉल्ट वृद्धि मान 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> आउटपुट
“काउंटर वैल्यू बढ़ाएं . पर क्लिक करने पर "बटन -
