जावास्क्रिप्ट के साथ कक्षाओं को अद्यतन करना
जावास्क्रिप्ट HTML तत्वों के साथ गतिशील रूप से इंटरैक्ट करने और उनमें हेरफेर करने के लिए शक्तिशाली उपकरण प्रदान करता है। एक सामान्य कार्य ऑनक्लिक जैसी घटनाओं के जवाब में HTML तत्व की कक्षा को बदलना है।
यह मार्गदर्शिका प्रदर्शित करेगी कि किसी तत्व की कक्षा को बदलने के लिए जावास्क्रिप्ट का उपयोग कैसे करें, जिससे आपके वेब पेजों पर गतिशील स्टाइल और व्यवहार में परिवर्तन हो सके। चाहे आप किसी बटन क्लिक या किसी अन्य घटना पर प्रतिक्रिया दे रहे हों, ये तकनीकें आपके वेब विकास कौशल को बढ़ाएंगी।
| आज्ञा | विवरण |
|---|---|
| className | किसी तत्व की वर्ग विशेषता सेट या लौटाता है। तत्व के वर्ग को बदलने के लिए उपयोग किया जाता है। |
| getElementById | वह तत्व लौटाता है जिसमें निर्दिष्ट मान के साथ आईडी विशेषता है। बटन तत्व का चयन करने के लिए उपयोग किया जाता है। |
| onclick | तत्व पर क्लिक इवेंट होने पर फ़ंक्शन को निष्पादित करने के लिए सेट करता है। |
| removeClass | jQuery में चयनित तत्वों से एक या अधिक वर्ग नाम हटा देता है। |
| addClass | jQuery में चयनित तत्वों में एक या अधिक वर्ग नाम जोड़ता है। |
| $ | jQuery के लिए उपनाम, तत्वों का चयन करने और उन पर क्रियाएं करने के लिए उपयोग किया जाता है। |
जावास्क्रिप्ट क्लास मैनिपुलेशन को समझना
प्रदान की गई स्क्रिप्ट दर्शाती है कि किसी क्लिक इवेंट के जवाब में जावास्क्रिप्ट और jQuery का उपयोग करके HTML तत्व की कक्षा को कैसे बदला जाए। पहली स्क्रिप्ट में, इस कार्यक्षमता को प्राप्त करने के लिए सादे जावास्क्रिप्ट का उपयोग किया जाता है। getElementById 'myButton' आईडी वाले बटन तत्व का चयन करने के लिए विधि का उपयोग किया जाता है। onclick ईवेंट को तब इस तत्व को सौंपा जाता है, जो बटन क्लिक करने पर निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करता है। इस फ़ंक्शन के अंदर, बटन का className संपत्ति को 'परिवर्तित' पर सेट किया गया है, सीएसएस में परिभाषित अनुसार इसकी कक्षा और बाद में इसकी शैली को बदल दिया गया है। यह स्क्रिप्ट DOM हेरफेर के लिए सादे जावास्क्रिप्ट का उपयोग करने की सरलता और प्रत्यक्षता को प्रभावी ढंग से प्रदर्शित करती है।
दूसरी स्क्रिप्ट jQuery, एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी का उपयोग करके समान कार्यक्षमता को दर्शाती है जो HTML दस्तावेज़ ट्रैवर्सल और हेरफेर को सरल बनाती है। यहाँ, jQuery उपनाम $ बटन तत्व का चयन करने के लिए उपयोग किया जाता है। click फिर क्लिक इवेंट के लिए इवेंट हैंडलर सेट करने के लिए विधि लागू की जाती है। इस हैंडलर के भीतर, बटन की कक्षा को jQuery का उपयोग करके संशोधित किया गया है removeClass और addClass तरीके. ये विधियां तत्व की कक्षाओं में हेरफेर करने का एक सुविधाजनक तरीका प्रदान करती हैं, जो सादे जावास्क्रिप्ट की तुलना में अधिक पठनीय और संक्षिप्त दृष्टिकोण प्रदान करती हैं। दोनों स्क्रिप्ट का उद्देश्य यह प्रदर्शित करना है कि विभिन्न उपकरण उपयोगकर्ता इंटरैक्शन के आधार पर किसी तत्व की कक्षा को गतिशील रूप से बदलने के समान लक्ष्य को कैसे प्राप्त कर सकते हैं।
जावास्क्रिप्ट का उपयोग करके क्लिक पर किसी तत्व की कक्षा बदलना
जावास्क्रिप्ट और HTML
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
jQuery का उपयोग करके HTML तत्व की कक्षा को अद्यतन करना
jQuery के साथ जावास्क्रिप्ट
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
जावास्क्रिप्ट में कक्षा हेरफेर के लिए उन्नत तकनीकें
घटनाओं के जवाब में बुनियादी वर्ग परिवर्तनों से परे, जावास्क्रिप्ट किसी तत्व की वर्ग सूची में हेरफेर करने के लिए अधिक उन्नत तकनीक प्रदान करता है। ऐसा ही एक तरीका है classList संपत्ति, जो कक्षाओं के साथ काम करने का अधिक लचीला और शक्तिशाली तरीका प्रदान करती है। classList संपत्ति तत्व की वर्ग विशेषताओं का एक लाइव DOMTokenList संग्रह लौटाती है। का उपयोग करते हुए classList, आप तत्व पर लागू होने वाली अन्य कक्षाओं को प्रभावित किए बिना कक्षाओं को जोड़, हटा, टॉगल और जांच कर सकते हैं।
उदाहरण के लिए, add विधि का उपयोग किसी तत्व में एक या अधिक कक्षाएं जोड़ने के लिए किया जा सकता है, जबकि remove विधि एक या अधिक निर्दिष्ट वर्गों को हटा सकती है। toggle विधि विशेष रूप से उपयोगी है क्योंकि यह क्लास को जोड़ती है यदि वह मौजूद नहीं है और यदि मौजूद है तो उसे हटा देती है, जिससे यह डार्क मोड टॉगल को लागू करने जैसे कार्यों के लिए आदर्श बन जाती है। इसके अतिरिक्त, contains विधि जाँच करती है कि क्या तत्व में एक विशिष्ट वर्ग है, जो किसी तत्व की वर्तमान स्थिति के आधार पर शैलियों या व्यवहारों को सशर्त रूप से लागू करने के लिए उपयोगी हो सकता है।
जावास्क्रिप्ट क्लास मैनिपुलेशन के बारे में अक्सर पूछे जाने वाले प्रश्न
- मैं किसी तत्व में एकाधिक कक्षाएं कैसे जोड़ूं?
- उपयोग classList.add अनेक तर्कों वाली विधि: element.classList.add('class1', 'class2').
- क्या मैं किसी तत्व से सभी कक्षाएं हटा सकता हूं?
- हाँ, आप इसका उपयोग कर सकते हैं className संपत्ति बनाएं और इसे एक खाली स्ट्रिंग पर सेट करें: element.className = ''.
- के बीच क्या अंतर है className और classList?
- className संपूर्ण वर्ग विशेषता सेट करता है या प्राप्त करता है, जबकि classList कक्षाओं में अधिक सूक्ष्म हेरफेर की अनुमति देता है।
- मैं कैसे जांचूं कि किसी तत्व में कोई विशिष्ट वर्ग है या नहीं?
- उपयोग classList.contains तरीका: element.classList.contains('classname').
- मैं किसी तत्व पर कक्षा को कैसे टॉगल करूं?
- उपयोग classList.toggle तरीका: element.classList.toggle('classname').
- क्या मैं कक्षाओं में हेरफेर करने के लिए jQuery का उपयोग कर सकता हूँ?
- हाँ, jQuery जैसे तरीके प्रदान करता है addClass, removeClass, और toggleClass.
- लाइव DOMTokenList क्या है?
- ए DOMTokenList एक लाइव संग्रह है जो तत्व की वर्ग विशेषता बदलने पर स्वचालित रूप से अपडेट हो जाता है।
- है classList सभी ब्राउज़रों में समर्थित?
- classList यह सभी आधुनिक ब्राउज़रों में समर्थित है, लेकिन इंटरनेट एक्सप्लोरर के पुराने संस्करण इसका पूरी तरह से समर्थन नहीं कर सकते हैं।
- मैं शर्तों के आधार पर गतिशील रूप से कक्षाएं कैसे जोड़ सकता हूं?
- आप उपयोग कर सकते हैं if के साथ संयोजन में बयान classList.add या classList.remove कक्षाओं को सशर्त रूप से लागू करना।
गतिशील वर्ग परिवर्तन के लिए मुख्य तकनीकें
प्रदान की गई स्क्रिप्ट दर्शाती है कि किसी क्लिक इवेंट के जवाब में जावास्क्रिप्ट और jQuery का उपयोग करके HTML तत्व की कक्षा को कैसे बदला जाए। पहली स्क्रिप्ट में, इस कार्यक्षमता को प्राप्त करने के लिए सादे जावास्क्रिप्ट का उपयोग किया जाता है। getElementById 'myButton' आईडी वाले बटन तत्व का चयन करने के लिए विधि का उपयोग किया जाता है। onclick ईवेंट को तब इस तत्व को सौंपा जाता है, जो बटन क्लिक करने पर निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करता है। इस फ़ंक्शन के अंदर, बटन का className संपत्ति को 'परिवर्तित' पर सेट किया गया है, सीएसएस में परिभाषित अनुसार इसकी कक्षा और बाद में इसकी शैली को बदल दिया गया है। यह स्क्रिप्ट DOM हेरफेर के लिए सादे जावास्क्रिप्ट का उपयोग करने की सरलता और प्रत्यक्षता को प्रभावी ढंग से प्रदर्शित करती है।
दूसरी स्क्रिप्ट jQuery, एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी का उपयोग करके समान कार्यक्षमता को दर्शाती है जो HTML दस्तावेज़ ट्रैवर्सल और हेरफेर को सरल बनाती है। यहाँ, jQuery उपनाम $ बटन तत्व का चयन करने के लिए उपयोग किया जाता है। click फिर क्लिक इवेंट के लिए इवेंट हैंडलर सेट करने के लिए विधि लागू की जाती है। इस हैंडलर के भीतर, बटन की कक्षा को jQuery का उपयोग करके संशोधित किया गया है removeClass और addClass तरीके. ये विधियां तत्व की कक्षाओं में हेरफेर करने का एक सुविधाजनक तरीका प्रदान करती हैं, जो सादे जावास्क्रिप्ट की तुलना में अधिक पठनीय और संक्षिप्त दृष्टिकोण प्रदान करती हैं। दोनों स्क्रिप्ट का उद्देश्य यह प्रदर्शित करना है कि विभिन्न उपकरण उपयोगकर्ता इंटरैक्शन के आधार पर किसी तत्व की कक्षा को गतिशील रूप से बदलने के समान लक्ष्य को कैसे प्राप्त कर सकते हैं।
मुख्य बिंदुओं का सारांश
जावास्क्रिप्ट या jQuery का उपयोग करके HTML तत्व की कक्षा में हेरफेर करना किसी तत्व की शैली और व्यवहार को गतिशील रूप से अपडेट करने का एक सीधा तरीका प्रदान करता है। जैसे तरीकों को समझकर और उनका उपयोग करके className, classList, और jQuery के क्लास मैनिपुलेशन तरीकों से, डेवलपर्स अपने वेब पेजों की अन्तरक्रियाशीलता और प्रतिक्रियाशीलता को बढ़ा सकते हैं, जिससे वे उपयोगकर्ताओं के लिए अधिक आकर्षक बन सकते हैं।