getElementsByClassName का उपयोग करके तत्व शैलियों को बदलना

getElementsByClassName आपको एक ही वर्ग नाम के साथ कई तत्वों का चयन करने की अनुमति देता है। दिए गए उदाहरण में, कोड का लक्ष्य एक विशिष्ट वर्ग नाम के साथ सभी divs की पृष्ठभूमि का रंग बदलना है जब कोई घटना उन divs के बाहर होती है।

समस्या निदान

प्रदान किए गए कोड में कुछ समस्याएं हैं:

1. getElementsByClassName का गलत उपयोग: वाक्यविन्यास getElementsByClassName() मेल खाने वाले तत्वों का संग्रह लौटाता है, एक भी DOM तत्व नहीं। प्रत्येक तत्व की शैली को बदलने के लिए, आपको संग्रह के माध्यम से लूप करना होगा। .
2. समाधान

इन मुद्दों को हल करने के लिए, आप निम्नलिखित सुधार का उपयोग कर सकते हैं कोड:

window.onload = function() { var aElements = document.getElementsByClassName('a'); var bElements = document.getElementsByClassName('b'); document.getElementById('A').addEventListener('mouseover', function() { रंग बदलें(aElements, 'लाल'); }); document.getElementById('B').addEventListener('mouseover', function() { रंग बदलें(बीएलिमेंट्स, 'नीला'); }); }; फ़ंक्शन परिवर्तनरंग(तत्व, रंग) { के लिए (var i = 0; i इस संशोधित कोड में:

window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i हम सभी मिलान तत्वों की शैली को बदलने के लिए getElementsByClassName द्वारा लौटाए गए संग्रह के माध्यम से लूप करते हैं।
हम रिक्त स्थान के बिना सही आईडी का उपयोग करते हैं ट्रिगरिंग तत्वों की पहचान करने के लिए।
हम वांछित रंग परिवर्तन को लागू करने के लिए चेंज कलर फ़ंक्शन को परिभाषित करते हैं तत्व।
अतिरिक्त नोट्स
इष्टतम प्रदर्शन के लिए, तत्वों के संग्रह को हर बार पुन: क्वेरी करने के बजाय कैशिंग करने पर विचार करें। इसके अतिरिक्त, शैली परिवर्तन के लिए सीएसएस कक्षाओं और ईवेंट श्रोताओं का उपयोग इनलाइन विशेषताओं की तुलना में अधिक कुशल है।