जावास्क्रिप्ट में एलिमेंट का क्लास कैसे बदलें: 2025 की सर्वोत्तम प्रथाएँ

जावास्क्रिप्ट में एलिमेंट का क्लास कैसे बदलें: 2025 में शुरुआत से विशेषज्ञ तक

क्या आपने कभी चाहा है कि वेबसाइट पर एक बटन क्लिक करने पर रंग बदल दे, और मेनू आसानी से बाहर आ जाए? यह सब क्लासेस बदलने का जादू है। प्रश्न «How can I change an element's class with JavaScript?» Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है (दसियों हज़ार व्यूज़)। और यह उचित भी है: इस कौशल के बिना आधुनिक वेब डेवलपमेंट की कल्पना करना कठिन है।

2025 में ब्राउज़र और भी स्मार्ट हो गए हैं, लेकिन मूल उपकरण वही रहा है — classList। इस लेख में हम जावास्क्रिप्ट में एलिमेंट का क्लास बदलने के सभी तरीकों पर चर्चा करेंगे: क्लासिक से लेकर आधुनिक तकनीकों तक। आप सीखेंगे कि गलतियों से कैसे बचें और ऐसा कोड लिखें जो इंटरव्यू में दिखाने में शर्म न आए।

क्लास बदलना क्यों महत्वपूर्ण है?

कल्पना करें कि आप ब्लॉक्स से एक घर बना रहे हैं। हर ब्लॉक एक HTML एलिमेंट है, और क्लासेस स्टिकर हैं जो कहते हैं: «मैं लाल हूँ», «मैं एनिमेटेड हूँ», «मैं छिपा हुआ हूँ»। जब उपयोगकर्ता एक बटन दबाता है, तो आप बस स्टिकर बदल देते हैं — और एलिमेंट जीवंत हो जाता है। क्लासेस बदले बिना, आपको पूरा इंटरफ़ेस फिर से बनाना होगा, जो धीमा और दुखद है।

2025 में जावास्क्रिप्ट में एलिमेंट का क्लास बदलना एक बुनियादी ऑपरेशन है जो 10 में से 9 इंटरैक्टिव वेबसाइटों में उपयोग होता है। मोडल विंडो से लेकर डार्क थीम तक — सब कुछ क्लासेस पर आधारित है।

शुद्ध जावास्क्रिप्ट: classList — आपका मुख्य उपकरण

यदि आप अभी भी className और स्ट्रिंग कॉन्केटनेशन का उपयोग कर रहे हैं — तो रुक जाएँ। 2025 में classList है। यह एक अंतर्निहित API है जो सभी आधुनिक ब्राउज़रों में काम करता है (हाँ, Safari में भी)।

यह इस तरह दिखता है:

// एलिमेंट प्राप्त करें\nconst button = document.querySelector('.my-button');\n\n// क्लास जोड़ें\nbutton.classList.add('active');\n\n// क्लास हटाएँ\nbutton.classList.remove('active');\n\n// क्लास टॉगल करें\nbutton.classList.toggle('active');\n\n// जाँचें कि क्लास मौजूद है या नहीं\nif (button.classList.contains('active')) {\n  console.log('बटन सक्रिय है!');\n}

यह कोड बुनियादी है जो हर किसी को पता होना चाहिए। लेकिन कुछ बारीकियाँ हैं जो अच्छे कोड को उत्कृष्ट बनाती हैं।

एकाधिक क्लासेस: एक साथ जोड़ना और हटाना

एक साथ कई क्लासेस जोड़ना चाहते हैं? आसान है:

element.classList.add('visible', 'animated', 'highlight');

हटाने के लिए भी यही:

element.classList.remove('hidden', 'fade-out');

यह Internet Explorer 11 में भी काम करता है (यदि आप पुराने ब्राउज़रों का समर्थन करते हैं)। 2025 में यह मानक है।

क्लास बदलना: एक को दूसरे से बदलना

कभी-कभी एक क्लास को दूसरे से बदलने की आवश्यकता होती है। उदाहरण के लिए, आइकन को «सूर्य» से «चंद्रमा» में बदलना। इसके लिए replace विधि है:

element.classList.replace('icon-sun', 'icon-moon');

यदि icon-sun क्लास मौजूद नहीं है — तो कुछ नहीं होगा, कोई त्रुटि नहीं होगी। यह सुरक्षित और पढ़ने योग्य है।

सशर्त टॉगलिंग: बूलियन फ़्लैग के साथ toggle

toggle विधि दूसरा तर्क ले सकती है — एक बूलियन मान। यदि true है — क्लास जुड़ जाएगा, यदि false है — हट जाएगा। यह तब सुविधाजनक है जब आप क्लास को स्थिति के साथ सिंक करना चाहते हैं:

const isDarkMode = true;\nelement.classList.toggle('dark', isDarkMode); // 'dark' जोड़ेगा\n\nconst isLoggedIn = false;\nelement.classList.toggle('logged-in', isLoggedIn); // 'logged-in' हटाएगा

यह if-else लिखने से कहीं अधिक साफ है।

className का क्या? इसकी कब आवश्यकता है?

पुराना और अच्छा className अभी भी जीवित है, लेकिन इसका समय बीत चुका है। यह सभी क्लासेस को एक साथ बदल देता है:

element.className = 'new-class another-class';

समस्या: यदि एलिमेंट में पहले से क्लासेस थीं, तो वे मिट जाएँगी। 2025 में className का उपयोग केवल दो मामलों में किया जाता है:

\n
• जब पूरी तरह से बदलने की आवश्यकता हो
\n