यह मैनुअल जावास्क्रिप्ट में एक सक्रिय वर्ग जोड़ने की प्रक्रिया की व्याख्या करेगा।
जावास्क्रिप्ट में एक्टिव क्लास कैसे जोड़ें?
एक सक्रिय वर्ग जोड़ने के लिए, हम निम्नलिखित विधियों का उपयोग करेंगे:
आइए पहली विधि पर चलते हैं!
विधि 1: document.getElementById () का उपयोग classList.add () के साथ जावास्क्रिप्ट में सक्रिय वर्ग जोड़ने की विधि
जावास्क्रिप्ट में, ' document.getElementById () 'विधि का उपयोग किसी निश्चित तत्व को उसकी आईडी से एक्सेस करने के लिए किया जाता है। हालांकि, यह केवल उनकी आईडी के आधार पर तत्वों का चयन करता है, कक्षाओं का नहीं। आप इसका उपयोग 'के साथ कर सकते हैं क्लासलिस्ट। जोड़ें () जावास्क्रिप्ट में एक सक्रिय वर्ग जोड़ने की विधि।
आइए एक उदाहरण लेकर इस विधि का अन्वेषण करें।
उदाहरण
हमारी एचटीएमएल फाइल में, हम ' 'कुछ पाठ के साथ टैग करें, इसकी आईडी निर्दिष्ट करें' टेक्स्ट ', और एक' जोड़ें क्लिक पर 'घटना जो ट्रिगर करेगी' सक्रिय() ' समारोह। ध्यान दें,
टैग को
टैग में जोड़ें: < पी आईडी = 'टेक्स्ट' क्लिक पर = 'सक्रिय()' > यहां टैप करें पी >जावास्क्रिप्ट फ़ाइल में, सक्रिय () फ़ंक्शन को इस तरह से परिभाषित करें कि यह पहले दस्तावेज़ में अपनी आईडी का उपयोग करके पैराग्राफ तत्व तक पहुँचता है। getElementbyId () विधि। फिर, स्टाइलिंग उद्देश्यों के लिए एक CSS क्लास को उसकी क्लास लिस्ट में जोड़ें:
समारोह सक्रिय ( ) {
वहां एक है = दस्तावेज़। getElementById ( 'टेक्स्ट' ) ;
एक। वर्गसूची . जोड़ें ( 'नया वर्ग' ) ;
}
CSS फ़ाइल में, “के पहले एक बिंदु लगाएं” नई कक्षा 'और' असाइन करें पीछे का रंग 'संपत्ति एक मूल्य' संतरा ':
. नई कक्षा {पार्श्वभूमि - रंग : संतरा ;
}
परिणामस्वरूप, जब आप अनुच्छेद तत्व पर क्लिक करेंगे, तो अतिरिक्त पृष्ठभूमि गुण उस पर लागू हो जाएगा:
आइए निम्नलिखित विधि पर एक नज़र डालें जिसमें हम एक सक्रिय वर्ग जोड़ने के लिए document.querySelector() का उपयोग करेंगे।
विधि 2: document.querySelector() का उपयोग classList.add() के साथ JavaScript में सक्रिय वर्ग जोड़ने की विधि
जावास्क्रिप्ट में, ' दस्तावेज़.क्वेरी चयनकर्ता () कोड से पहला तत्व प्राप्त करने के लिए 'विधि का उपयोग किया जाता है। आप querySelector() विधि के भीतर कक्षाएं और आईडी दोनों निर्दिष्ट कर सकते हैं। इसका उपयोग 'के साथ किया जा सकता है क्लासलिस्ट। जोड़ें () जावास्क्रिप्ट में एक सक्रिय वर्ग जोड़ने की विधि।
उदाहरण
अब हम केवल ' दस्तावेज़.क्वेरी चयनकर्ता () 'आईडी के साथ' #टेक्स्ट 'अनुच्छेद तत्व का चयन करने के लिए। फिर से, सक्रिय जोड़ने के लिए classList.add() विधि का उपयोग किया जाएगा ' नई कक्षा ':
समारोह सक्रिय ( ) {वहां एक है = दस्तावेज़। क्वेरी चयनकर्ता ( '#टेक्स्ट' ) ;
एक। वर्गसूची . जोड़ें ( 'नया वर्ग' ) ;
}
उत्पादन
हमने जावास्क्रिप्ट में सक्रिय वर्ग जोड़ने के लिए दो सरल तरीके सीखे हैं
निष्कर्ष
सक्रिय वर्ग जोड़ने के लिए, हम 'का उपयोग कर सकते हैं' getElementById () ' या ' क्वेरी चयनकर्ता () 'classList.add() विधि के साथ। दोनों उल्लिखित विधियों को पहले उनकी आईडी द्वारा तत्व प्राप्त होते हैं, फिर classList.add() विधि का उपयोग करके, तत्व को असाइन किया गया नया वर्ग नाम स्टाइल उद्देश्यों के लिए उपयोग किया जा सकता है। इस पोस्ट में जावास्क्रिप्ट में एक सक्रिय वर्ग जोड़ने से संबंधित प्रक्रिया का वर्णन किया गया है।