रॉ वेनिला JavaScript के साथ किसी एलिमेंट में कई स्टाइल्स जोड़ना थोड़ा बोझिल लग सकता है। सादे JavaScript से एलिमेंट्स को स्टाइल करने का सबसे आम दृष्टिकोण जो मैंने देखा है वह है अपने टार्गेट एलिमेंट को पकड़ना, और फिर एक बार में एक स्टाइल जोड़ना:
// टार्गेट एलिमेंट पकड़ें (यहां इसके क्लास एट्रिब्यूट के माध्यम से) const buttonAddToCart = document.querySelector(".button-add-to-cart") // स्टाइल प्रॉपर्टीज़, एक बार में एक buttonAddToCart.style.backgroundColor = "#82b97e" buttonAddToCart.style.color = "#fff" buttonAddToCart.style.padding = "24px" buttonAddToCart.style.textTransform = "uppercase" buttonAddToCart.style.letterSpacing = "0.1em"यह काम करता है, लेकिन यह अनावश्यक है, इसमें बहुत अधिक दोहराव है, और आप अपने कोड का पुन: उपयोग नहीं कर सकते। यह अनाम फ़ंक्शन के बजाय नामित फ़ंक्शन का उपयोग करने जैसा है।
उपरोक्त करने के बजाय, आप एक स्टाइल ऑब्जेक्ट का उपयोग कर सकते हैं:
// एक स्टाइल ऑब्जेक्ट बनाएं const buttonPrimary = { backgroundColor: "#82b97e", color: "#fff", padding: "24px", textTransform: "uppercase", letterSpacing: "0.1em", } // buttonPrimary (स्टाइल ऑब्जेक्ट) को बटन एलिमेंट में असाइन करें Object.assign(buttonAddToCart.style, buttonPrimary)न केवल यह दृष्टिकोण क्लीनर है, बल्कि आप इस buttonPrimary स्टाइल ऑब्जेक्ट को किसी भी बटन एलिमेंट पर लागू कर सकते हैं जिसे प्राइमरी बटन स्टाइल्स की आवश्यकता है, और दोहराव वाले कोड को लिखने से बच सकते हैं।
स्टाइल ऑब्जेक्ट को कई एलिमेंट्स पर लागू करने का कोड उदाहरण
रुको, आप CSS के बजाय HTML एलिमेंट्स को स्टाइल करने के लिए JavaScript का उपयोग क्यों करेंगे?
क्षमा करें, मैं चारा नहीं ले रहा, CSS-in-JS, या JSS, CSS और JS सीन में एक गर्म विषय है, लेकिन मेरा इस लड़ाई में कोई दांव नहीं है। मुझे दोनों दृष्टिकोण पसंद हैं। मैं सुझाव देता हूँ कि आप अपने द्वारा लिए गए निर्णयों के पीछे संदर्भ को ड्राइवर के रूप में उपयोग करें।
लेकिन मैं एक मामला बनाऊंगा जब JavaScript से स्टाइलिंग काम आ सकती है। मान लीजिए आप ऐसी स्थिति में हैं जहां आपके पास उस CSS स्टाइलशीट तक सीधी पहुंच नहीं है जो किसी एलिमेंट पर स्टाइलिंग को परिभाषित करती है। इस स्थिति में, JavaScript के साथ मौजूदा स्टाइल्स को स्टाइल/ओवरराइट करने में सक्षम होना आपके क्लाइंट की समस्या को तेजी से हल करने, या शायद उस दिन हल न कर पाने के बीच का अंतर हो सकता है।
इस प्रकार के परिदृश्य में, JavaScript की बहुमुखी प्रतिभा चमकती है।
