JavaScript में CSS कक्षाओं के साथ स्टाइलिंग के लाभ

सीधे स्टाइल बदलने के बजाय कक्षाओं का उपयोग करने का एक और फायदा है। हाथ के एक हल्के से इशारे से, आप ऐसा कर सकते हैं कि तत्वों की शैलियाँ बारी-बारी से बदलती रहें।

उदाहरण के लिए, आप ऐसा कर सकते हैं कि पैराग्राफ पर पहली बार क्लिक करने पर वह एक निश्चित रंग में रंग जाए, और दूसरी बार क्लिक करने पर - अपने मूल रंग में वापस आ जाए। इसके लिए बस add विधि को toggle विधि से बदलने की आवश्यकता है:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function() {
    this.classList.toggle('colored');
  });
}