जावास्क्रिप्ट में स्टाइलिंग का अनुप्रयोग

आइए एक बटन बनाएं, जिस पर क्लिक करने पर तत्व दिखाई देगा या छिप जाएगा। मान लीजिए कि डिफ़ॉल्ट रूप से तत्व छिपा हुआ है (इसे हम display: none का उपयोग करके लागू करेंगे), और यह active क्लास जोड़ने से दिखाई देगा। इस क्लास को हम classList.toggle का उपयोग करके जोड़ेंगे और हटाएंगे:

html<button id="button">मुझे क्लिक करें</button>
<div id="elem"></div>

css#elem {
  display: none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}
#elem.active {
  display: block;
}

javascriptlet button = document.querySelector('#button');
let elem = document.querySelector('#elem');

button.addEventListener('click', function() {
  elem.classList.toggle('active');
});

Результат: