जावास्क्रिप्ट में कक्षाओं के साथ स्टाइलिंग
style विशेषता के माध्यम से तत्वों को स्टाइल करना
कभी-कभी सुविधाजनक होता है, लेकिन अक्सर - सबसे अच्छा
विचार नहीं होता। समस्या यह है कि स्टाइल
जावास्क्रिप्ट फ़ाइल में बिखरे होंगे
और उन्हें बदलना मुश्किल होगा।
CSS फ़ाइलों में स्टाइल निर्धारित करना कहीं अधिक सुविधाजनक है
ताकि उन्हें आसानी से बदला जा सके,
जावास्क्रिप्ट कोड में खोदे बिना।
उदाहरण के लिए, मान लीजिए कि हमारे पास एक तत्व है जो एक संदेश प्रदर्शित करता है। संदेश "अच्छा" हो सकता है और हरे रंग में प्रदर्शित हो सकता है और "बुरा" हो सकता है और लाल रंग में प्रदर्शित हो सकता है। ऐसे मामले में सबसे अच्छा समाधान होगा इसके लिए संबंधित CSS कक्षाएँ बनाना:
.success {
color: green;
}
.error {
color: red;
}
अब "अच्छा" संदेश प्रदर्शित करते समय हम तत्व को "अच्छी" कक्षा देंगे:
elem.textContent = 'good';
elem.classList.add('success');
और "बुरा" संदेश प्रदर्शित करते समय हम तत्व को "बुरी" कक्षा देंगे:
elem.textContent = 'bad';
elem.classList.add('error');
संख्याओं वाले अनुच्छेद दिए गए हैं। इन अनुच्छेदों को लूप से पुनरावृत्त करें और जिन अनुच्छेदों में सम संख्याएँ हैं, उन्हें लाल रंग में रंगें, और जिनमें विषम संख्याएँ हैं - उन्हें हरे रंग में।
