शुद्ध जावास्क्रिप्ट के साथ तत्व वर्गों को टॉगल करना: एक व्यापक गाइड

परिचय

जावास्क्रिप्ट में, गतिशील वेब विकास के लिए तत्व वर्गों को नियंत्रित करना महत्वपूर्ण है। एक सामान्य कार्य किसी तत्व की उपस्थिति या कार्यक्षमता को बदलने के लिए कक्षाओं को टॉगल करना है। जबकि jQuery ने इस कार्य को सरल बना दिया है, यह समझना आवश्यक है कि शुद्ध जावास्क्रिप्ट का उपयोग करके इसे कैसे पूरा किया जाए। निर्दिष्ट तत्वों पर मेनू-छिपी और छिपी-फ़ोन कक्षाएं।

जावास्क्रिप्ट समतुल्य:

विकल्प 1 (classList.toggle)

:

• आधुनिक ब्राउज़र classList.toggle() पद्धति का समर्थन करते हैं। उदाहरण के लिए:

var मेनू = document.querySelector('.menu'); // इसके बजाय किसी क्लास का उपयोग करना, नीचे नोट देखें। मेनू.क्लासलिस्ट.टॉगल('हिडन-फ़ोन');

var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

:

• पुराने ब्राउज़र classList.toggle() को लागू करने के लिए classlist.js लाइब्रेरी का उपयोग कर सकते हैं। उदाहरण:

var classList = require('classlist'); // लाइब्रेरी आयात करें var मेनू = document.querySelector('.menu'); classList.toggle(menu, 'hidden-phone');

आईडी उपयोग पर स्पष्टीकरण

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');