JavaScript सह वर्ग अपडेट करत आहे
JavaScript HTML घटकांशी डायनॅमिकरित्या संवाद साधण्यासाठी आणि हाताळण्यासाठी शक्तिशाली साधने प्रदान करते. ऑनक्लिक सारख्या इव्हेंटला प्रतिसाद म्हणून HTML घटकाचा वर्ग बदलणे हे एक सामान्य कार्य आहे.
हे मार्गदर्शक आपल्या वेब पृष्ठांवर डायनॅमिक शैली आणि वर्तन बदलांना अनुमती देऊन घटकाचा वर्ग बदलण्यासाठी JavaScript कसे वापरावे हे दर्शवेल. तुम्ही एका बटण क्लिकला प्रतिसाद देत असलात किंवा अन्य इव्हेंटला, ही तंत्रे तुमची वेब डेव्हलपमेंट कौशल्ये वाढवतील.
| आज्ञा | वर्णन |
|---|---|
| className | घटकाची वर्ग विशेषता सेट करते किंवा परत करते. घटकाचा वर्ग बदलण्यासाठी वापरला जातो. |
| getElementById | निर्दिष्ट मूल्यासह ID विशेषता असलेला घटक मिळवते. बटण घटक निवडण्यासाठी वापरले जाते. |
| onclick | घटकावर क्लिक इव्हेंट झाल्यावर कार्यान्वित करण्यासाठी कार्य सेट करते. |
| removeClass | jQuery मधील निवडलेल्या घटकांमधून एक किंवा अधिक वर्गांची नावे काढून टाकते. |
| addClass | jQuery मधील निवडलेल्या घटकांना एक किंवा अधिक वर्गांची नावे जोडते. |
| $ | jQuery साठी उपनाव, घटक निवडण्यासाठी आणि त्यावर क्रिया करण्यासाठी वापरले जाते. |
जावास्क्रिप्ट क्लास मॅनिपुलेशन समजून घेणे
दिलेल्या स्क्रिप्ट्स क्लिक इव्हेंटला प्रतिसाद म्हणून JavaScript आणि jQuery वापरून HTML घटकाचा वर्ग कसा बदलायचा हे दाखवतात. पहिल्या स्क्रिप्टमध्ये ही कार्यक्षमता साध्य करण्यासाठी साध्या JavaScript चा वापर केला जातो. द getElementById 'myButton' ID सह बटण घटक निवडण्यासाठी पद्धत वापरली जाते. द १ बटणावर क्लिक केल्यावर कार्यान्वित करण्याचे फंक्शन निर्दिष्ट करून, या घटकाला इव्हेंट नियुक्त केला जातो. या फंक्शनच्या आत, बटणाचे className गुणधर्म 'बदललेला' वर सेट केला आहे, त्याचा वर्ग बदलून आणि नंतर त्याची शैली CSS मध्ये परिभाषित केल्याप्रमाणे. ही स्क्रिप्ट DOM मॅनिप्युलेशनसाठी साधे JavaScript वापरण्याची साधेपणा आणि थेटपणा प्रभावीपणे दाखवते.
दुसरी स्क्रिप्ट jQuery वापरून समान कार्यक्षमता दर्शवते, एक लोकप्रिय JavaScript लायब्ररी जी HTML दस्तऐवज ट्रॅव्हर्सल आणि हाताळणी सुलभ करते. येथे, jQuery उर्फ $ बटण घटक निवडण्यासाठी वापरले जाते. द click नंतर क्लिक इव्हेंटसाठी इव्हेंट हँडलर सेट करण्यासाठी पद्धत लागू केली जाते. या हँडलरमध्ये, jQuery चा वापर करून बटणाचा वर्ग सुधारला जातो ५ आणि addClass पद्धती साध्या JavaScript च्या तुलनेत अधिक वाचनीय आणि संक्षिप्त दृष्टीकोन ऑफर करून या पद्धती घटकांच्या वर्गांमध्ये फेरफार करण्याचा एक सोयीस्कर मार्ग प्रदान करतात. दोन्ही स्क्रिप्ट वापरकर्त्याच्या परस्परसंवादावर आधारित घटकाचा वर्ग डायनॅमिकरित्या बदलण्याचे समान ध्येय कसे साध्य करू शकतात हे दाखवणे हे दोन्ही स्क्रिप्टचे उद्दिष्ट आहे.
JavaScript वापरून क्लिकवर घटकाचा वर्ग बदलणे
JavaScript आणि 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 सह JavaScript
१JavaScript मध्ये क्लास मॅनिपुलेशनसाठी प्रगत तंत्रे
इव्हेंटच्या प्रतिसादात मूलभूत वर्ग बदलांच्या पलीकडे, JavaScript घटकांच्या वर्ग सूचीमध्ये फेरफार करण्यासाठी अधिक प्रगत तंत्रे ऑफर करते. अशी एक पद्धत आहे ७ मालमत्ता, जी वर्गांसह कार्य करण्याचा अधिक लवचिक आणि शक्तिशाली मार्ग प्रदान करते. द ७ गुणधर्म घटकाच्या वर्ग गुणधर्मांचे थेट DOMTokenList संग्रह परत करते. वापरत आहे ७, तुम्ही घटकावर लागू होऊ शकणाऱ्या इतर वर्गांना प्रभावित न करता वर्ग जोडू, काढू, टॉगल करू आणि तपासू शकता.
उदाहरणार्थ, द add घटकामध्ये एक किंवा अधिक वर्ग जोडण्यासाठी पद्धत वापरली जाऊ शकते, तर remove पद्धत एक किंवा अधिक निर्दिष्ट वर्ग काढू शकते. द toggle पद्धत विशेषतः उपयुक्त आहे कारण ती अस्तित्वात नसल्यास वर्ग जोडते आणि असल्यास ती काढून टाकते, ज्यामुळे गडद मोड टॉगल लागू करणे यासारख्या कार्यांसाठी ते आदर्श बनते. याव्यतिरिक्त, द contains घटकामध्ये विशिष्ट वर्ग आहे की नाही हे पद्धत तपासते, जे घटकाच्या सद्य स्थितीवर आधारित शैली किंवा वर्तन सशर्तपणे लागू करण्यासाठी उपयुक्त असू शकते.
JavaScript क्लास मॅनिप्युलेशनबद्दल वारंवार विचारले जाणारे प्रश्न
- मी एका घटकामध्ये अनेक वर्ग कसे जोडू?
- वापरा classList.add एकाधिक वितर्कांसह पद्धत: १५.
- मी घटकातील सर्व वर्ग काढू शकतो का?
- होय, आपण वापरू शकता className गुणधर्म आणि रिकाम्या स्ट्रिंगवर सेट करा: १७.
- यांच्यात काय फरक आहे className आणि ७?
- className संपूर्ण वर्ग विशेषता सेट करते किंवा मिळवते, तर ७ वर्गांच्या अधिक बारीक हाताळणीसाठी अनुमती देते.
- एखाद्या घटकाचा विशिष्ट वर्ग आहे की नाही हे मी कसे तपासू?
- वापरा classList.contains पद्धत: element.classList.contains('classname').
- मी घटकावर वर्ग कसा टॉगल करू?
- वापरा २४ पद्धत: २५.
- वर्ग हाताळण्यासाठी मी jQuery वापरू शकतो का?
- होय, jQuery सारख्या पद्धती प्रदान करते addClass, ५, आणि २८.
- थेट DOMTokenList म्हणजे काय?
- ए DOMTokenList हा एक थेट संग्रह आहे जो घटकाची वर्ग विशेषता बदलल्यावर आपोआप अपडेट होतो.
- आहे ७ सर्व ब्राउझरमध्ये समर्थित?
- ७ सर्व आधुनिक ब्राउझरमध्ये समर्थित आहे, परंतु इंटरनेट एक्सप्लोररच्या जुन्या आवृत्त्या पूर्णपणे समर्थन देत नाहीत.
- मी अटींवर आधारित वर्ग गतिकरित्या कसे जोडू शकतो?
- तुम्ही वापरू शकता if च्या संयोजनात विधाने classList.add किंवा ३४ सशर्त वर्ग लागू करण्यासाठी.
डायनॅमिक क्लास बदलांसाठी प्रमुख तंत्रे
दिलेल्या स्क्रिप्ट्स क्लिक इव्हेंटला प्रतिसाद म्हणून JavaScript आणि jQuery वापरून HTML घटकाचा वर्ग कसा बदलायचा हे दाखवतात. पहिल्या स्क्रिप्टमध्ये ही कार्यक्षमता साध्य करण्यासाठी साध्या JavaScript चा वापर केला जातो. द getElementById 'myButton' ID सह बटण घटक निवडण्यासाठी पद्धत वापरली जाते. द १ इव्हेंट नंतर या घटकास नियुक्त केले जाते, बटण क्लिक केल्यावर कार्यान्वित होणारे कार्य निर्दिष्ट करते. या फंक्शनच्या आत, बटणाचे className गुणधर्म 'बदललेला' वर सेट केला आहे, त्याचा वर्ग बदलून आणि नंतर त्याची शैली CSS मध्ये परिभाषित केल्याप्रमाणे. ही स्क्रिप्ट DOM मॅनिप्युलेशनसाठी साधे JavaScript वापरण्याची साधेपणा आणि थेटपणा प्रभावीपणे दाखवते.
दुसरी स्क्रिप्ट jQuery वापरून समान कार्यक्षमता दर्शवते, एक लोकप्रिय JavaScript लायब्ररी जी HTML दस्तऐवज ट्रॅव्हर्सल आणि हाताळणी सुलभ करते. येथे, jQuery उर्फ $ बटण घटक निवडण्यासाठी वापरले जाते. द click त्यानंतर क्लिक इव्हेंटसाठी इव्हेंट हँडलर सेट करण्यासाठी पद्धत लागू केली जाते. या हँडलरमध्ये, jQuery चा वापर करून बटणाचा वर्ग सुधारला जातो ५ आणि addClass पद्धती साध्या JavaScript च्या तुलनेत अधिक वाचनीय आणि संक्षिप्त दृष्टीकोन ऑफर करून या पद्धती घटकांच्या वर्गांमध्ये फेरफार करण्याचा एक सोयीस्कर मार्ग प्रदान करतात. दोन्ही स्क्रिप्ट वापरकर्त्याच्या परस्परसंवादावर आधारित घटकाचा वर्ग डायनॅमिकरित्या बदलण्याचे समान ध्येय कसे साध्य करू शकतात हे दाखवणे हे दोन्ही स्क्रिप्टचे उद्दिष्ट आहे.
मुख्य मुद्यांचा सारांश
JavaScript किंवा jQuery वापरून HTML घटकाच्या वर्गात फेरफार केल्याने घटकाची शैली आणि वर्तन डायनॅमिकरित्या अद्यतनित करण्याचा एक सरळ मार्ग उपलब्ध होतो. सारख्या पद्धती समजून घेऊन आणि वापरून className, ७, आणि jQuery च्या क्लास मॅनिप्युलेशन पद्धती, डेव्हलपर त्यांच्या वेब पृष्ठांची परस्परसंवादीता आणि प्रतिसाद वाढवू शकतात, त्यांना वापरकर्त्यांसाठी अधिक आकर्षक बनवू शकतात.