2010-02-21 16 views
5

पर कई HTML तत्वों के सीएसएस को बदलें या स्वैप करें मेरे पास मेरे दस्तावेज़ में लगभग 100 <span class="foo">, 100 <span class="bar"> और 100 <span class="baz"> टैग हैं। मुझे जावास्क्रिप्ट में निम्नलिखित परिचालनों को लागू करने की आवश्यकता है:एक बार

  • पृष्ठभूमि को सभी फ़ूज़ लाल रंग में बदलें, सभी सलाखों को हरे रंग में, सभी बाज़ नीले रंग में बदलें।
  • पृष्ठभूमि को सभी फूज़ हरे रंग में बदलें, सभी सलाखों को नीले रंग में, सभी बाज़ लाल रंग में बदलें।
  • पृष्ठभूमि को सभी फ़ूज़ को नीले रंग में बदलें, सभी बार लाल रंग में, सभी बाज़ हरे रंग में बदलें।

मैं पूरी तरह 1000 बार के बारे में इन आपरेशनों फोन करेगा, तो मैं एक समाधान है जो <head> हर बार मैं एक ऑपरेशन कर एक <style> टैग संलग्न कर देता है से बचने के लिए चाहते हैं।

वहाँ कुछ सरल या तेज या document.getElementsByTagName('span') के साथ सभी <span> तत्वों से अधिक पुनरावृत्ति, और बदलने या प्रत्येक तत्व के लिए .className डोम संपत्तियों के लिए जोड़कर की तुलना में बेहतर है?

उत्तर

9

तत्व वर्ग नाम बदलने के बजाय, ऐसा करने के लिए सीएसएस का उपयोग करना सबसे आसान तरीका है। निम्नलिखित मार्कअप और सीएसएस पर विचार करें।

.normal .foo{ 
    background-color: #0f0; 
} 
.alternate .foo { 
    background-color: #f00; 
} 

<body class="normal"> 
    <span class="foo">hello</span> 
    <span class="bar">hello</span> 
    <span class="baz">hello</span> 
</body> 

आप बस जावास्क्रिप्ट का उपयोग कर सकते सामान्य से शरीर पर classname बदलने के लिए वैकल्पिक करने के लिए, .foo तत्वों पर रंग परिवर्तन को लागू करने। अधिक नियम बार और बाज़ के लिए रंग सेट करेंगे।

document.getElementsByTagName('body')[0].className = 'alternate'; 
2

आप अपने दस्तावेज़ के शरीर को यह निर्धारित करने के लिए एक वर्ग दे सकते हैं कि रंगों की कौन सी कॉन्फ़िगरेशन का उपयोग किया जाना चाहिए और फिर तदनुसार स्पैन को स्टाइल करें।

जैसे:

.configTypeOne span.foo{...} 
.configTypeTwo span.foo{...} 

आप तो समय की कुछ अवधि के बाद एक ही पृष्ठ पर शैलियों बदल रहे हों, जे एस का एक छोटा सा टुकड़ा बदलने के लिए शरीर के वर्ग होगा कि सभी आवश्यक है।