किसी एलिमेंट में क्लास प्रॉपर्टी जोड़ने से डेवलपर को वेब पेज पर एक डायनामिक यूजर अनुभव बनाने में मदद मिलती है। जब किसी एलिमेंट में क्लास प्रॉपर्टी जोड़ी जाती है, तो वह चयनित एलिमेंट उस क्लास नाम से जुड़ी स्टाइलिंग मान लेगा।
उपयोगकर्ता द्वारा बटन क्लिक करने के बारे में सोचें। जब बटन क्लिक किया जाता है, तो हम चाहते हैं कि वेब पेज का एक सेक्शन हमारे CSS स्टाइलशीट के आधार पर बदल जाए। हम उस स्टाइलिंग से जुड़े क्लास नाम को एलिमेंट को असाइन कर सकते हैं ताकि बटन क्लिक होने के बाद उसकी उपस्थिति बदल जाए।
किसी भी फ्रंट एंड प्रोग्रामिंग में इंटरैक्टिव अनुभव बनाना महत्वपूर्ण है। इस गाइड में, हम प्लेन जावास्क्रिप्ट में चयनित एलिमेंट में क्लास नाम जोड़ने के दो तरीकों का पता लगाएंगे। अंत तक, आप इस टूल को अपने प्रोजेक्ट्स में उपयोग कर पाएंगे।
JavaScript Add Class का उपयोग कैसे करें
जावास्क्रिप्ट में, क्लास नाम जोड़ना कुछ तरीकों से किया जा सकता है। पहले, हम वांछित HTML एलिमेंट का चयन करते हैं। फिर, हमारे पास या तो className प्रॉपर्टी या add() मेथड का उपयोग करके एलिमेंट में क्लास नाम जोड़ने का विकल्प होता है। हम अगले सेक्शन में सिंटैक्स और उपयोग देखेंगे।
याद रखें, हम यहां प्लेन जावास्क्रिप्ट का उपयोग कर रहे हैं। किसी लाइब्रेरी की आवश्यकता नहीं है। चूंकि हम नियमित जावास्क्रिप्ट का उपयोग कर रहे हैं, एक सामान्य अभ्यास है कि उपरोक्त लॉजिक को एक फंक्शन के अंदर लपेटा जाए और उस फंक्शन को इवेंट हैंडलर को पास किया जाए। यह सुनिश्चित करेगा कि क्लास नाम जोड़ने का फंक्शन केवल एक विशिष्ट इवेंट होने के बाद होगा।
जहां तक HTML एलिमेंट्स का सवाल है, उनके कई क्लास नाम हो सकते हैं। यह याद रखना उपयोगी है क्योंकि हम उन एलिमेंट्स में क्लास नाम जोड़ सकते हैं जिनमें पहले से ही अन्य क्लास नाम या आईडी हैं। हमें बस अपने प्रोजेक्ट में ध्यान रखना है कि कौन सी स्टाइलिंग किन क्लास नामों से जुड़ी है और उन नामों को उन एलिमेंट्स में जोड़ें जिन्हें हम स्टाइल करना चाहते हैं।
क्लास नाम जोड़ने के लिए जावास्क्रिप्ट सिंटैक्स
हम एलिमेंट में क्लास नाम जोड़ने के दो तरीके देखने जा रहे हैं। उपरोक्त सेक्शन से याद रखें कि क्लास जोड़ने के लॉजिक को फंक्शन के अंदर लपेटना एक सामान्य अभ्यास है। एक बार हमारा फंक्शन बन जाने के बाद, हम इसे onClick HTML एट्रिब्यूट के अंदर कॉल कर सकते हैं।
प्लेन जावास्क्रिप्ट का उपयोग करके क्लास नाम जोड़ने का पहला तरीका className प्रॉपर्टी के माध्यम से है। यहां लॉजिक है कि एलिमेंट का चयन करें, फिर चयनित एलिमेंट पर .className कॉल करें। फिर हम क्लास नाम को एलिमेंट के साथ जोड़ सकते हैं।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
आइए हमारे HTML से शुरू करें:
<div id="div"> Hello World </div> <button> Add Class </button>
यहां हमारे पास "div" आईडी वाला एक <div> है। हमारे <div> के नीचे एक बटन है। यह बटन क्लिक होने पर क्लास नाम जोड़ेगा। अब आइए एक उदाहरण CSS क्लास देखें।
.background { background-color: blue; color: white; }
हमारी CSS फाइल में, हमारे पास "background" क्लास है। यहां इसे नीले बैकग्राउंड कलर के साथ स्टाइल किया जाएगा और टेक्स्ट सफेद होगा। हम क्लास नाम "background" को "div" आईडी वाले अपने <div> में जोड़ना चाहते हैं।
जावास्क्रिप्ट एक फंक्शन में <div> को चुनकर इसे संभाल सकता है, जैसे यह वाला:
const addClass = () => { const element = document.getElementById('div'); element.className += "background" }
हमारा addClass नामक फंक्शन "div" आईडी द्वारा <div> का चयन करेगा। हम इसे element नामक वेरिएबल में स्टोर कर सकते हैं। यहां से, हम अपने वेरिएबल पर className प्रॉपर्टी कॉल करते हैं और क्लास नाम "background" को जोड़ते हैं। समीक्षा के रूप में, जावास्क्रिप्ट में कनकैटेनेशन एलिमेंट को एक लिस्ट में जोड़ता है। दूसरे शब्दों में, क्लास नाम को जोड़ने से वह क्लास नाम एलिमेंट में जुड़ जाएगा और उस एलिमेंट पर पहले से परिभाषित क्लासेस अभी भी दिखाई देंगी।
हम अभी पूरी तरह समाप्त नहीं हुए हैं! हमें अभी भी अपना addClass फंक्शन कहीं कॉल करना है। आइए बटन क्लिक होने के बाद <div> में क्लास नाम जोड़ें।
<div id="div"> Hello World </div> <button onClick="addClass()"> Add Class </button>
जावास्क्रिप्ट onClick मेथड का उपयोग करके, हम बटन क्लिक होने के बाद अपना फंक्शन कॉल कर सकते हैं। बटन क्लिक करके इसे टेस्ट करते हैं।
समीक्षा करते हैं कि अभी क्या हुआ, हमने क्लास नाम "background" जोड़ा जो हमारी CSS फाइल में स्टाइलिंग से जुड़ा था। जावास्क्रिप्ट फंक्शन बनाने के बाद जो एलिमेंट को ढूंढता है और क्लास नाम जोड़ता है, बटन क्लिक होने पर क्लास स्टाइल <div> पर लागू हो गई।
JavaScript add() मेथड
उपरोक्त उदाहरण का उपयोग करते हुए, आइए क्लास नाम जोड़ने का दूसरा तरीका देखें। इसमें जावास्क्रिप्ट add() मेथड का उपयोग शामिल है। उपरोक्त उदाहरण के विपरीत, हम add() को कॉल करने के लिए classList प्रॉपर्टी का उपयोग करते हैं।
हमारा addClass() फंक्शन अब इस तरह दिखता है:
const addClass = () => { const element = document.getElementById('div'); element.classList.add("background") }
हम अभी भी आईडी द्वारा <div> प्राप्त कर रहे हैं और इसे वेरिएबल में स्टोर कर रहे हैं। फिर हम अपने वेरिएबल पर classList प्रॉपर्टी कॉल करते हैं जिसके बाद add() मेथड आता है। हम क्लास नाम "background" को add() में आर्गुमेंट के रूप में पास करते हैं।
<div> में अब क्लास "background" जुड़ गई है।
हम दो अलग-अलग तरीकों से कोडिंग करके समान परिणाम प्राप्त करते हैं। आपके कोड में किसे लागू करना है यह आपकी पसंद है, लेकिन दूसरा मेथड बेस्ट प्रैक्टिस के रूप में अधिक व्यापक रूप से स्वीकार किया जाता है। add() का उपयोग करना बेस्ट प्रैक्टिस माना जाता है क्योंकि यह कनकैटेनेशन का उपयोग करने की तुलना में कम त्रुटि-प्रवण है।
निष्कर्ष
इस गाइड में, हमने सीखा कि किसी एलिमेंट में क्लास नाम कैसे जोड़ा जाता है। यह तब उपयोगी होता है जब आपके पास CSS फाइल में स्टाइल की गई क्लास होती है। किसी विशिष्ट HTML एलिमेंट में क्लास नाम जोड़कर, वह एलिमेंट CSS फाइल में पाई जाने वाली स्टाइलिंग को विरासत में लेता है।
पेज पर एलिमेंट्स के दिखने के तरीके को डायनामिक रूप से बदलकर, हम यूजर को अपने ऐप के साथ इंटरैक्टिव अनुभव देने में सक्षम होते हैं। जब हम इंटरैक्टिव एप्लिकेशन लिखते हैं, तो यह यूजर को स्वाभाविक और आकर्षक लगता है। यह उन्हें हमारे ऐप को और अधिक एक्सप्लोर करने के लिए वापस आने के लिए प्रेरित करेगा।
