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