जावास्क्रिप्ट के साथ CSS कक्षाओं का उपयोग करके स्टाइलिंग

पिछले पाठ में, हमने सीखा कि कैसे style विशेषता को बदलकर तत्वों के CSS स्टाइल बदले जाते हैं। अक्सर यह एक बहुत अच्छा विचार नहीं होता है। बात यह है कि, यदि CSS स्टाइल को जावास्क्रिप्ट कोड में फैला दिया जाए, तो भविष्य में साइट का डिज़ाइन बदलना समस्याग्रस्त होगा, क्योंकि वहां दर्ज स्टाइलों को खोजने के लिए जावास्क्रिप्ट कोड में खुदाई करनी पड़ेगी।

भविष्य के रखरखाव के लिए अधिक सुविधाजनक तरीका होगा तत्व को CSS कक्षाएं जोड़ना या हटाना, जिससे उन्हें आवश्यक तरीके से स्टाइल किया जा सके।

आइए एक उदाहरण देखें। मान लीजिए हमारे पास कुछ पैराग्राफ हैं:

<p>text1</p>
<p>text2</p>
<p>text3</p>

आइए ऐसा करें कि किसी भी पैराग्राफ पर क्लिक करने पर, यह पैराग्राफ किसी रंग में रंग जाए, उदाहरण के लिए, हरे रंग में। इसके लिए CSS फ़ाइल में पैराग्राफों को रंगने के लिए एक विशेष वर्ग बनाते हैं:

.colored {
	color: green;
}

कक्षा का उपयोग करने का लाभ यह है कि, अब वांछित रंग को बदलना आसान होगा - इसके लिए बस CSS फ़ाइल में परिवर्तन करना होगा, जावास्क्रिप्ट कोड में बदलाव किए बिना। यह विशेष रूप से सुविधाजनक होगा उस स्थिति में, यदि जावास्क्रिप्ट कोड आप लिख रहे हैं, और भविष्य में इसे कोई और स्टाइल करेगा (संभवतः कम योग्य व्यक्ति, जो केवल CSS के साथ काम करना जानता हो)।

तो, अब, कक्षा शुरू करने के बाद, किसी भी पैराग्राफ पर क्लिक करने पर उसका रंग बदला जा सकता है, बस उसमें हमारी कक्षा जोड़कर:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // पैराग्राफ में कक्षा जोड़ें
	});
}

समझाएं कि मैंने कक्षा का नाम रखने के लिए शब्द colored क्यों चुना, न कि शब्द green, जो स्पष्ट रूप से हमारे वांछित रंग की ओर इशारा करता है।

एक पैराग्राफ दिया गया है। बटन दिए गए हैं 'काटें', 'मोटा करें', 'लाल करें'। मान लीजिए कि प्रत्येक बटन दबाने पर दिया गया कार्य पैराग्राफ के साथ होता है (उदाहरण के लिए, लाल हो जाता है)।