HTML DOM classList प्रॉपर्टी का उपयोग किसी HTML एलिमेंट से जुड़े क्लास नामों को लौटाने के लिए किया जाता है। यह क्लास नामों को DOMTokenlist के रूप में लौटाता है। DOMTokenlist स्पेस-सेपरेटेड टोकन्स का एक सेट है। यह प्रॉपर्टी किसी एलिमेंट के CSS क्लासेस को जोड़ने, हटाने या टॉगल करने में उपयोगी है।
classList प्रॉपर्टी एक रीड-ओनली प्रॉपर्टी है लेकिन आप add() और remove() मेथड का उपयोग करके किसी एलिमेंट के क्लासेस को जोड़ या हटा सकते हैं।
प्रॉपर्टीज
classList की निम्नलिखिक प्रॉपर्टी है -
| प्रॉपर्टी | विवरण |
|---|---|
| Length | लिस्ट में क्लासेस की संख्या लौटाने के लिए। यह रीड-ओनली है। |
मेथड्स
classList के निम्नलिखिक मेथड्स हैं -
| मेथड | विवरण |
|---|---|
| add(class1, class2, class 3...) | एक एलिमेंट में एक या अधिक क्लास नाम जोड़ने के लिए। यदि दी गई क्लास पहले से मौजूद है, तो इसे जोड़ा नहीं जाएगा। |
| contains(class) | एक बूलियन मान लौटाने के लिए जो दर्शाता है कि एलिमेंट में दिया गया क्लास नाम है या नहीं। True का अर्थ है एलिमेंट में निर्दिष्ट क्लास नाम है जबकि false का अर्थ है कि क्लास नाम एलिमेंट में नहीं है। |
| item(index) | एक एलिमेंट से दिए गए इंडेक्स नंबर के साथ क्लास नाम लौटाने के लिए। इंडेक्सिंग 0 से शुरू होती है और यदि इंडेक्स आउट ऑफ रेंज है तो null लौटाएगी। |
| remove(class1, class2 class 3, ...) | एक एलिमेंट से एक या अधिक क्लास नाम हटाने के लिए। यदि remove में निर्दिष्ट क्लास मौजूद नहीं है तो यह कोई त्रुटि नहीं फेंकेगा। |
| toggle(class, true|false) | एक एलिमेंट के लिए क्लास नाम के बीच टॉगल करने के लिए। पहला पैरामीटर एलिमेंट में क्लास जोड़ता है यदि यह मौजूद नहीं है और true लौटाता है जबकि यदि क्लास मौजूद है तो यह इसे एलिमेंट से हटा देता है और false लौटाता है। दूसरा पैरामीटर एक वैकल्पिक है जो बूलियन मान लेता है और दी गई क्लास को जोड़ने या हटाने के लिए बाध्य करता है। इसकी परवाह नहीं करता कि यह पहले मौजूद था या नहीं। |
सिंटैक्स
classList प्रॉपर्टी के लिए निम्नलिखिक सिंटैक्स है -
element.classList
उदाहरण
आइए HTML DOM classList प्रॉपर्टी का एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } </style> </head> <body> <p>Click the below button to add class to the below div element</p> <button onclick="classAdd()">ADD CLASS</button> <br> <div id="DIV1"> sample div </div> <script> function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); } </script> </body> </html>
आउटपुट
यह निम्नलिखिक आउटपुट उत्पन्न करेगा -
ADD CLASS बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने एक div एलिमेंट और तीन CSS स्टाइल क्लासेस बनाई हैं जिन्हें हम बाद में div में जोड़ेंगे -
.firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } <div id="DIV1"> sample div </div>
फिर हमने ADD CLASS बटन बनाया जो क्लिक पर classAdd() मेथड को निष्पादित करेगा -
<button onclick="classAdd()">ADD CLASS</button>
classAdd() मेथड इससे जुड़े “DIV1” id वाले एलिमेंट को प्राप्त करता है जो हमारे मामले में <div> एलिमेंट है। फिर classlist प्रॉपर्टी और इसके add() मेथड का उपयोग करके हम firstDiv, secondDiv और thirdDiv क्लासेस को <div> एलिमेंट में जोड़ते हैं -
function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); }
