जावास्क्रिप्ट के साथ CSS गुणों को गतिशील रूप से संशोधित करना आकर्षक और उत्तरदायी वेब एप्लिकेशन बनाने के लिए आवश्यक है। यह तकनीक इंटरैक्टिव तत्वों, अनुकूली लेआउट और सुचारू एनिमेशन की अनुमति देती है, जिससे उपयोगकर्ता अनुभव में उल्लेखनीय वृद्धि होती है। यह लेख इसे प्राप्त करने के तीन प्राथमिक तरीकों का पता लगाता है: getElementById, getElementsByClassName और querySelector का लाभ उठाना।
विषयवस्तु की तालिका
getElementByIdके साथ CSS संशोधित करनाgetElementsByClassNameके साथ CSS संशोधित करनाquerySelectorके साथ CSS संशोधित करना- अच्छे अभ्यास और विचार
getElementById के साथ CSS संशोधित करना
getElementById विधि सीधे अपने अद्वितीय ID का उपयोग करके किसी तत्व को लक्षित करती है। प्रत्येक ID HTML दस्तावेज़ के भीतर अद्वितीय होना चाहिए। यह विधि एकल, विशेष रूप से पहचाने गए तत्व को संशोधित करने के लिए कुशल और सरल है।
const myElement = document.getElementById("myUniqueElement");
if (myElement) {
myElement.style.color = "purple";
myElement.style.fontSize = "1.2em";
}
यह कोड स्निपेट “myUniqueElement” ID वाले तत्व का रंग और फ़ॉन्ट आकार बदलता है। if कथन यह सुनिश्चित करता है कि कोड उन मामलों को सुचारू रूप से संभालता है जहां तत्व मौजूद नहीं हो सकता है, जिससे त्रुटियों को रोका जा सकता है।
getElementsByClassName के साथ CSS संशोधित करना
getElementsByClassName विधि एक विशिष्ट वर्ग नाम साझा करने वाले सभी तत्वों का एक संग्रह लौटाती है। जब आपको कई तत्वों पर समान शैली लागू करने की आवश्यकता होती है तो यह विशेष रूप से उपयोगी होता है।
const elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "lightgray";
}
यह कोड “myClass” वर्ग वाले सभी तत्वों के माध्यम से पुनरावृति करता है और उनका पृष्ठभूमि रंग सेट करता है। ध्यान दें कि getElementsByClassName एक लाइव HTMLCollection लौटाता है, जिसका अर्थ है कि DOM में परिवर्तन संग्रह में परिलक्षित होंगे।
querySelector के साथ CSS संशोधित करना
querySelector विधि सबसे अधिक लचीलापन प्रदान करती है, जिससे आप CSS चयनकर्ताओं का उपयोग करके तत्वों का चयन कर सकते हैं। यह पहला मिलान तत्व लौटाता है।
const element = document.querySelector(".myClass #myElement"); // "myClass" वर्ग वाले तत्व के भीतर #myElement का चयन करता है
if (element) {
element.style.border = "2px solid black";
}
const allElements = document.querySelectorAll(".anotherClass"); // "anotherClass" वर्ग वाले सभी तत्वों का चयन करता है
allElements.forEach(element => {
element.style.textDecoration = "underline";
})
यह उदाहरण एक संयुक्त चयनकर्ता का उपयोग करके एक विशिष्ट तत्व का चयन करना और querySelectorAll और forEach लूप का उपयोग करके एक विशिष्ट वर्ग वाले सभी तत्वों के माध्यम से पुनरावृति करना दर्शाता है। querySelectorAll एक स्थिर NodeList लौटाता है।
अच्छे अभ्यास और विचार
इष्टतम प्रदर्शन और रखरखाव के लिए:
- जहाँ तक संभव हो CSS कक्षाओं का उपयोग करें: इनलाइन शैलियों (
element.style.property = "value";) से बचें क्योंकि वे आपके सावधानीपूर्वक तैयार किए गए CSS को ओवरराइड कर सकते हैं और आपके कोड को बनाए रखना कठिन बना सकते हैं। इसके बजाय कक्षाओं को जोड़ने या हटाने के लिए जावास्क्रिप्ट का उपयोग करें। - त्रुटि संचालन: अपने गुणों को संशोधित करने का प्रयास करने से पहले यह हमेशा जांच लें कि तत्व मौजूद है या नहीं ताकि रनटाइम त्रुटियों को रोका जा सके।
- प्रदर्शन: बड़े पैमाने पर DOM हेरफेर के लिए, रिफ्लो और रीपेंट को कम करने के लिए दस्तावेज़ फ़्रैगमेंट जैसी तकनीकों पर विचार करें।
- विशिष्टता: वह चयनकर्ता विधि चुनें जो आपकी आवश्यकताओं के अनुकूल हो।
getElementByIdअद्वितीय तत्वों के लिए सबसे अच्छा है,getElementsByClassNameएक साझा वर्ग वाले कई तत्वों के लिए, औरquerySelector/querySelectorAllजटिल चयनों के लिए।