जावास्क्रिप्ट से CSS क्लास में बेहतरीन तरीके से बदलाव करें

वेब पेजों को गतिशील रूप से स्टाइल करना आकर्षक उपयोगकर्ता अनुभव बनाने के लिए महत्वपूर्ण है। JavaScript CSS कक्षाओं में हेरफेर करने के लिए शक्तिशाली उपकरण प्रदान करता है, जिससे इंटरैक्टिव तत्व और उत्तरदायी डिज़ाइन सक्षम होते हैं। यह लेख JavaScript में CSS कक्षाओं को संशोधित करने के सबसे कुशल तरीकों का पता लगाता है।

विषय-सूची

• classList.add()
• classList.remove()
• classList.toggle()
• className गुण (कम अनुशंसित)
• व्यावहारिक उदाहरण: एक टॉगल बटन

classList.add() के साथ CSS कक्षाएँ जोड़ना

classList.add() विधि एक तत्व में एक नई कक्षा को सुंदर ढंग से जोड़ती है। यदि कक्षा पहले से मौजूद है, तो इसे अनदेखा कर दिया जाता है, जिससे डुप्लिकेट को रोकने में मदद मिलती है। यह स्वच्छ और अनुमानित कक्षा प्रबंधन सुनिश्चित करता है।

const myElement = document.getElementById("myElement");
myElement.classList.add("newClass"); 

यह स्निपेट “myElement” ID वाले तत्व में “newClass” जोड़ता है। यदि “myElement” में पहले से ही “existingClass1 existingClass2” कक्षाएँ थीं, तो यह “existingClass1 existingClass2 newClass” हो जाती है।

classList.remove() के साथ CSS कक्षाएँ हटाना

classList.remove() कुशलतापूर्वक किसी तत्व से एक निर्दिष्ट कक्षा को हटा देता है। यदि कक्षा अनुपस्थित है, तो विधि चुपचाप कुछ नहीं करती है, जिससे त्रुटियों से बचा जा सकता है।

const myElement = document.getElementById("myElement");
myElement.classList.remove("existingClass");

यह “myElement” से “existingClass” हटाता है।

classList.toggle() के साथ CSS कक्षाओं को टॉगल करना

classList.toggle() इसकी वर्तमान उपस्थिति के आधार पर कक्षा को जोड़ने या हटाने का एक संक्षिप्त तरीका प्रदान करता है। यह तत्वों को दिखाने/छिपाने या राज्यों के बीच स्विच करने जैसे परिदृश्यों के लिए आदर्श है।

const myElement = document.getElementById("myElement");
myElement.classList.toggle("active");

यह “active” जोड़ता है यदि यह गायब है और यदि मौजूद है तो इसे हटा देता है।

className गुण में सीधे हेरफेर करना

जबकि संभव है, className गुण (जैसे, myElement.className = "newClass";) में सीधे हेरफेर करना आम तौर पर कम अनुशंसित है। यह दृष्टिकोण संपूर्ण कक्षा सूची को बदल देता है, संभावित रूप से अन्य महत्वपूर्ण कक्षाओं को अधिलेखित कर देता है। इसमें classList विधियों द्वारा दी जाने वाली सूक्ष्म नियंत्रण की कमी है।

व्यावहारिक उदाहरण: एक टॉगल बटन

आइए एक बटन बनाएँ जो प्रत्येक क्लिक पर अपनी उपस्थिति बदलता है:

<button id="myButton">मुझे क्लिक करें</button>

<style>
  .active {
    background-color: green;
    color: white;
  }
</style>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    button.classList.toggle("active");
  });
</script>

यह कोड एक ईवेंट लिसनर जोड़ता है। प्रत्येक क्लिक “active” कक्षा को टॉगल करता है, बटन की शैली को बदलता है।

classList.add(), classList.remove() और classList.toggle() में महारत हासिल करके, आप JavaScript में CSS कक्षाओं का कुशलतापूर्वक प्रबंधन कर सकते हैं, गतिशील और इंटरैक्टिव वेब एप्लिकेशन बना सकते हैं। जब तक बिलकुल आवश्यक न हो, सीधे className हेरफेर से बचें।