जावास्क्रिप्ट के साथ कक्षाओं को अद्यतन करना
जावास्क्रिप्ट HTML तत्वों के साथ गतिशील रूप से इंटरैक्ट करने और उनमें हेरफेर करने के लिए शक्तिशाली उपकरण प्रदान करता है। एक सामान्य कार्य ऑनक्लिक जैसी घटनाओं के जवाब में HTML तत्व की कक्षा को बदलना है।
यह मार्गदर्शिका प्रदर्शित करेगी कि किसी तत्व की कक्षा को बदलने के लिए जावास्क्रिप्ट का उपयोग कैसे करें, जिससे आपके वेब पेजों पर गतिशील स्टाइल और व्यवहार में परिवर्तन हो सके। चाहे आप किसी बटन क्लिक या किसी अन्य घटना पर प्रतिक्रिया दे रहे हों, ये तकनीकें आपके वेब विकास कौशल को बढ़ाएंगी।
| आज्ञा | विवरण |
|---|---|
| className | किसी तत्व की वर्ग विशेषता सेट या लौटाता है। तत्व के वर्ग को बदलने के लिए उपयोग किया जाता है। |
| getElementById | वह तत्व लौटाता है जिसमें निर्दिष्ट मान के साथ आईडी विशेषता है। बटन तत्व का चयन करने के लिए उपयोग किया जाता है। |
| onclick | तत्व पर क्लिक इवेंट होने पर फ़ंक्शन को निष्पादित करने के लिए सेट करता है। |
| removeClass | jQuery में चयनित तत्वों से एक या अधिक वर्ग नाम हटा देता है। |
| addClass | jQuery में चयनित तत्वों में एक या अधिक वर्ग नाम जोड़ता है। |
| $ | jQuery के लिए उपनाम, तत्वों का चयन करने और उन पर क्रियाएं करने के लिए उपयोग किया जाता है। |
जावास्क्रिप्ट क्लास मैनिपुलेशन को समझना
प्रदान की गई स्क्रिप्ट दर्शाती है कि किसी क्लिक इवेंट के जवाब में जावास्क्रिप्ट और jQuery का उपयोग करके HTML तत्व की कक्षा को कैसे बदला जाए। पहली स्क्रिप्ट में, इस कार्यक्षमता को प्राप्त करने के लिए सादे जावास्क्रिप्ट का उपयोग किया जाता है। 'myButton' आईडी वाले बटन तत्व का चयन करने के लिए विधि का उपयोग किया जाता है। ईवेंट को तब इस तत्व को सौंपा जाता है, जो बटन क्लिक करने पर निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करता है। इस फ़ंक्शन के अंदर, बटन का संपत्ति को 'परिवर्तित' पर सेट किया गया है, सीएसएस में परिभाषित अनुसार इसकी कक्षा और बाद में इसकी शैली को बदल दिया गया है। यह स्क्रिप्ट DOM हेरफेर के लिए सादे जावास्क्रिप्ट का उपयोग करने की सरलता और प्रत्यक्षता को प्रभावी ढंग से प्रदर्शित करती है।
दूसरी स्क्रिप्ट jQuery, एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी का उपयोग करके समान कार्यक्षमता को दर्शाती है जो HTML दस्तावेज़ ट्रैवर्सल और हेरफेर को सरल बनाती है। यहाँ, jQuery उपनाम बटन तत्व का चयन करने के लिए उपयोग किया जाता है। फिर क्लिक इवेंट के लिए इवेंट हैंडलर सेट करने के लिए विधि लागू की जाती है। इस हैंडलर के भीतर, बटन की कक्षा को jQuery का उपयोग करके संशोधित किया गया है और 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>
जावास्क्रिप्ट में कक्षा हेरफेर के लिए उन्नत तकनीकें
घटनाओं के जवाब में बुनियादी वर्ग परिवर्तनों से परे, जावास्क्रिप्ट किसी तत्व की वर्ग सूची में हेरफेर करने के लिए अधिक उन्नत तकनीक प्रदान करता है। ऐसा ही एक तरीका है संपत्ति, जो कक्षाओं के साथ काम करने का अधिक लचीला और शक्तिशाली तरीका प्रदान करती है। संपत्ति तत्व की वर्ग विशेषताओं का एक लाइव DOMTokenList संग्रह लौटाती है। का उपयोग करते हुए , आप तत्व पर लागू होने वाली अन्य कक्षाओं को प्रभावित किए बिना कक्षाओं को जोड़, हटा, टॉगल और जांच कर सकते हैं।
उदाहरण के लिए, विधि का उपयोग किसी तत्व में एक या अधिक कक्षाएं जोड़ने के लिए किया जा सकता है, जबकि विधि एक या अधिक निर्दिष्ट वर्गों को हटा सकती है। विधि विशेष रूप से उपयोगी है क्योंकि यह क्लास को जोड़ती है यदि वह मौजूद नहीं है और यदि मौजूद है तो उसे हटा देती है, जिससे यह डार्क मोड टॉगल को लागू करने जैसे कार्यों के लिए आदर्श बन जाती है। इसके अतिरिक्त, contains विधि जाँच करती है कि क्या तत्व में एक विशिष्ट वर्ग है, जो किसी तत्व की वर्तमान स्थिति के आधार पर शैलियों या व्यवहारों को सशर्त रूप से लागू करने के लिए उपयोगी हो सकता है।
- मैं किसी तत्व में एकाधिक कक्षाएं कैसे जोड़ूं?
- उपयोग अनेक तर्कों वाली विधि: .
- क्या मैं किसी तत्व से सभी कक्षाएं हटा सकता हूं?
- हाँ, आप इसका उपयोग कर सकते हैं संपत्ति बनाएं और इसे एक खाली स्ट्रिंग पर सेट करें: .
- के बीच क्या अंतर है और ?
- संपूर्ण वर्ग विशेषता सेट करता है या प्राप्त करता है, जबकि कक्षाओं में अधिक सूक्ष्म हेरफेर की अनुमति देता है।
- मैं कैसे जांचूं कि किसी तत्व में कोई विशिष्ट वर्ग है या नहीं?
- उपयोग तरीका: .
- मैं किसी तत्व पर कक्षा को कैसे टॉगल करूं?
- उपयोग तरीका: .
- क्या मैं कक्षाओं में हेरफेर करने के लिए jQuery का उपयोग कर सकता हूँ?
- हाँ, jQuery जैसे तरीके प्रदान करता है , , और .
- लाइव DOMTokenList क्या है?
- ए एक लाइव संग्रह है जो तत्व की वर्ग विशेषता बदलने पर स्वचालित रूप से अपडेट हो जाता है।
- है सभी ब्राउज़रों में समर्थित?
- यह सभी आधुनिक ब्राउज़रों में समर्थित है, लेकिन इंटरनेट एक्सप्लोरर के पुराने संस्करण इसका पूरी तरह से समर्थन नहीं कर सकते हैं।
- मैं शर्तों के आधार पर गतिशील रूप से कक्षाएं कैसे जोड़ सकता हूं?
- आप उपयोग कर सकते हैं के साथ संयोजन में बयान या कक्षाओं को सशर्त रूप से लागू करना।
गतिशील वर्ग परिवर्तन के लिए मुख्य तकनीकें
प्रदान की गई स्क्रिप्ट दर्शाती है कि किसी क्लिक इवेंट के जवाब में जावास्क्रिप्ट और jQuery का उपयोग करके HTML तत्व की कक्षा को कैसे बदला जाए। पहली स्क्रिप्ट में, इस कार्यक्षमता को प्राप्त करने के लिए सादे जावास्क्रिप्ट का उपयोग किया जाता है। 'myButton' आईडी वाले बटन तत्व का चयन करने के लिए विधि का उपयोग किया जाता है। ईवेंट को तब इस तत्व को सौंपा जाता है, जो बटन क्लिक करने पर निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करता है। इस फ़ंक्शन के अंदर, बटन का संपत्ति को 'परिवर्तित' पर सेट किया गया है, सीएसएस में परिभाषित अनुसार इसकी कक्षा और बाद में इसकी शैली को बदल दिया गया है। यह स्क्रिप्ट DOM हेरफेर के लिए सादे जावास्क्रिप्ट का उपयोग करने की सरलता और प्रत्यक्षता को प्रभावी ढंग से प्रदर्शित करती है।
दूसरी स्क्रिप्ट jQuery, एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी का उपयोग करके समान कार्यक्षमता को दर्शाती है जो HTML दस्तावेज़ ट्रैवर्सल और हेरफेर को सरल बनाती है। यहाँ, jQuery उपनाम बटन तत्व का चयन करने के लिए उपयोग किया जाता है। फिर क्लिक इवेंट के लिए इवेंट हैंडलर सेट करने के लिए विधि लागू की जाती है। इस हैंडलर के भीतर, बटन की कक्षा को jQuery का उपयोग करके संशोधित किया गया है और addClass तरीके. ये विधियां तत्व की कक्षाओं में हेरफेर करने का एक सुविधाजनक तरीका प्रदान करती हैं, जो सादे जावास्क्रिप्ट की तुलना में अधिक पठनीय और संक्षिप्त दृष्टिकोण प्रदान करती हैं। दोनों स्क्रिप्ट का उद्देश्य यह प्रदर्शित करना है कि विभिन्न उपकरण उपयोगकर्ता इंटरैक्शन के आधार पर किसी तत्व की कक्षा को गतिशील रूप से बदलने के समान लक्ष्य को कैसे प्राप्त कर सकते हैं।
जावास्क्रिप्ट या jQuery का उपयोग करके HTML तत्व की कक्षा में हेरफेर करना किसी तत्व की शैली और व्यवहार को गतिशील रूप से अपडेट करने का एक सीधा तरीका प्रदान करता है। जैसे तरीकों को समझकर और उनका उपयोग करके , , और jQuery के क्लास मैनिपुलेशन तरीकों से, डेवलपर्स अपने वेब पेजों की अन्तरक्रियाशीलता और प्रतिक्रियाशीलता को बढ़ा सकते हैं, जिससे वे उपयोगकर्ताओं के लिए अधिक आकर्षक बन सकते हैं।