जावास्क्रिप्ट क्लास जोड़ें:एक गाइड

किसी तत्व में क्लास प्रॉपर्टी जोड़ने से डेवलपर को वेब पेज पर एक गतिशील उपयोगकर्ता अनुभव बनाने में मदद मिलती है। जब किसी तत्व में एक वर्ग गुण जोड़ा जाता है, तो वह चयनित तत्व उस वर्ग के नाम से जुड़ी शैली को ग्रहण कर लेगा।

एक बटन क्लिक करने वाले उपयोगकर्ता के बारे में सोचें। जब बटन पर क्लिक किया जाता है, तो हम चाहते हैं कि हमारे सीएसएस स्टाइलशीट के आधार पर वेब पेज का एक भाग बदल जाए। बटन पर क्लिक करने के बाद हम उस स्टाइल से जुड़े एक वर्ग नाम को तत्व को बदलने के लिए असाइन कर सकते हैं।

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

जावास्क्रिप्ट ऐड क्लास का उपयोग कैसे करें

जावास्क्रिप्ट में, एक वर्ग का नाम कुछ तरीकों से जोड़ा जा सकता है। सबसे पहले, हम वांछित HTML तत्व का चयन करते हैं। फिर, हमारे पास क्लासनाम प्रॉपर्टी या add() . का उपयोग करने का विकल्प है तत्व में वर्ग का नाम जोड़ने की विधि। हम सिंटैक्स के माध्यम से जाएंगे और अगले भाग में उपयोग करेंगे।

याद रखें, हम यहां सादे जावास्क्रिप्ट का उपयोग कर रहे हैं। कोई पुस्तकालय आवश्यक नहीं है। क्योंकि हम नियमित जावास्क्रिप्ट का उपयोग कर रहे हैं, एक सामान्य अभ्यास उपरोक्त तर्क को किसी फ़ंक्शन के अंदर लपेटना और उस फ़ंक्शन को ईवेंट हैंडलर को पास करना है। यह सुनिश्चित करेगा कि वर्ग का नाम जोड़ने का कार्य किसी विशिष्ट घटना के होने के बाद ही होगा।

जहाँ तक HTML तत्वों का संबंध है, उनके कई वर्ग नाम हो सकते हैं। यह याद रखना उपयोगी है क्योंकि हम उन तत्वों में वर्ग नाम जोड़ सकते हैं जिनमें पहले से ही अन्य वर्ग के नाम या आईडी हैं। हमें केवल यह ध्यान रखना है कि हमारी परियोजना में किस वर्ग के नाम से स्टाइल जुड़ा हुआ है और उन तत्वों में नाम जोड़ें जिन्हें हम स्टाइल करना चाहते हैं।

जावास्क्रिप्ट सिंटैक्स एक वर्ग का नाम जोड़ने के लिए

हम एक तत्व में एक वर्ग का नाम जोड़ने के दो तरीकों को देखने जा रहे हैं। उपरोक्त खंड से याद रखें कि किसी फ़ंक्शन के अंदर एक वर्ग जोड़ने के लिए तर्क को लपेटना एक सामान्य अभ्यास है। एक बार जब हम अपना फ़ंक्शन बना लेते हैं, तो हम इसे ऑनक्लिक HTML विशेषता के अंदर कॉल कर सकते हैं।

सादा जावास्क्रिप्ट का उपयोग करके कक्षा का नाम जोड़ने का पहला तरीका क्लासनाम संपत्ति के माध्यम से जाना है। यहां तर्क तत्व का चयन करना है, फिर चयनित तत्व पर .className को कॉल करें। तब हम वर्ग के नाम को तत्व से जोड़ सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

आइए अपने एचटीएमएल से शुरू करें:

नमस्ते विश्व
वर्ग जोड़ें

यहां हमारे पास "div" की एक आईडी के साथ एक

है। हमारे

के नीचे एक बटन होता है। एक बार क्लिक करने पर यह बटन कक्षा का नाम जोड़ देगा। अब एक उदाहरण CSS क्लास पर एक नजर डालते हैं।

<पूर्व>.पृष्ठभूमि {पृष्ठभूमि-रंग:नीला; रंग:सफ़ेद;}

हमारी सीएसएस फ़ाइल में, हमारे पास "पृष्ठभूमि" वर्ग है। यहां इसे नीले रंग के बैकग्राउंड कलर से स्टाइल किया जाएगा और टेक्स्ट व्हाइट होगा। हम अपने

आईडी "div" के साथ वर्ग नाम "पृष्ठभूमि" जोड़ना चाहते हैं।

जावास्क्रिप्ट किसी फ़ंक्शन में

का चयन इस तरह से कर सकता है:

const addClass =() => {const element =document.getElementById('div'); element.className +="बैकग्राउंड"}

AddClass नामक हमारा फ़ंक्शन "div" की अपनी आईडी से

का चयन करेगा। हम इसे एलिमेंट नामक वेरिएबल में स्टोर कर सकते हैं। यहां से, हम अपने वेरिएबल पर क्लासनाम प्रॉपर्टी को कॉल करते हैं और क्लास के नाम को "बैकग्राउंड" से जोड़ते हैं। एक समीक्षा के रूप में, जावास्क्रिप्ट में संयोजन तत्व को एक सूची में जोड़ता है। दूसरे शब्दों में, एक वर्ग के नाम को जोड़ने से उस वर्ग का नाम उस तत्व में जुड़ जाएगा और उस तत्व पर पहले से परिभाषित कक्षाएं अभी भी दिखाई देंगी।

हम अभी पूरी तरह से समाप्त नहीं हुए हैं! हमें अभी भी अपने ऐडक्लास फंक्शन को कहीं न कहीं कॉल करना है। बटन पर क्लिक करने के बाद हमारे

में क्लास का नाम जोड़ें।

नमस्ते विश्व
<बटन onClick="addClass()">वर्ग जोड़ें

जावास्क्रिप्ट ऑनक्लिक विधि का उपयोग करके, हम बटन क्लिक करने के बाद अपने फ़ंक्शन को कॉल कर सकते हैं। आइए बटन पर क्लिक करके इसका परीक्षण करें।

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

पर लागू कर दिया गया था।

जावास्क्रिप्ट ऐड () विधि

ऊपर के समान उदाहरण का उपयोग करते हुए, आइए एक वर्ग नाम जोड़ने का दूसरा तरीका देखें। इसमें जावास्क्रिप्ट का उपयोग करना शामिल है add() तरीका। उपरोक्त उदाहरण के विपरीत, हम add() . को कॉल करने के लिए classList प्रॉपर्टी का उपयोग करते हैं .

हमारा addClass() समारोह अब इस तरह दिखता है:

const addClass =() => {const element =document.getElementById('div'); element.classList.add("background")}

हम अभी भी इसकी आईडी से

प्राप्त कर रहे हैं और इसे एक चर में संग्रहीत कर रहे हैं। फिर हम अपने वेरिएबल पर क्लासलिस्ट प्रॉपर्टी को add() . कहते हैं तरीका। हम वर्ग नाम “पृष्ठभूमि” को add() . में पास करते हैं एक तर्क के रूप में।

में अब "पृष्ठभूमि" वर्ग जोड़ा गया है।

हम एक ही परिणाम को दो अलग-अलग तरीकों से कोडिंग करके प्राप्त करते हैं। आपके कोड में लागू करने का विकल्प आपका है, लेकिन दूसरी विधि को सर्वोत्तम अभ्यास के रूप में अधिक व्यापक रूप से स्वीकार किया जाता है। add() का उपयोग करना सबसे अच्छा अभ्यास माना जाता है क्योंकि यह संयोजन का उपयोग करने से कम त्रुटि प्रवण होता है।

निष्कर्ष

इस गाइड में, हमने सीखा कि किसी तत्व में क्लास का नाम कैसे जोड़ा जाता है। यह तब उपयोगी होता है जब आपके पास सीएसएस फ़ाइल में स्टाइल की गई कक्षा होती है। एक विशिष्ट HTML तत्व में वर्ग का नाम जोड़कर, उस तत्व को CSS फ़ाइल में मिली शैली विरासत में मिलती है।

पृष्ठ पर तत्वों के दिखने के तरीके को गतिशील रूप से बदलकर, हम उपयोगकर्ता को अपने ऐप के साथ एक इंटरैक्टिव अनुभव देने में सक्षम हैं। जब हम इंटरैक्टिव एप्लिकेशन लिखते हैं, तो यह उपयोगकर्ता के लिए स्वाभाविक और आकर्षक लगता है। यह उन्हें हमारे ऐप को और अधिक एक्सप्लोर करने के लिए वापस आता रहेगा।