जावास्क्रिप्ट - एक वर्ग को बदलने 'शैली

Question

मैं थोड़ी देर के लिए jQuery के साथ काम किया गया है, लेकिन अब मैं शुद्ध जावास्क्रिप्ट में कुछ लिखना चाहते हैं और यह चुनौतीपूर्ण prooving है .. मेरी सबसे बड़ी समस्या का एक में पल वह यह है कि मुझे कक्षा के लिए स्टाइल सेट/बदलने का कोई तरीका नहीं मिला है। इस आईडी के साथ तत्वों के लिए एक समस्या नहीं है, लेकिन मैं एक ही कक्षा के साथ तत्वों और के एक समूह सिर्फ एक आईडी के साथ एक तत्व के लिए .. jQuery में मैं सिर्फ लिखते थे नहीं के लिए स्टाइल बदलना चाहते हैं:

$('.someClass').css('color','red') 

क्या शुद्ध जेएस में वास्तव में कोई साधारण समानता नहीं है?

Answer 1

प्रयास करें निम्नलिखित

var all = document.getElementsByClassName('someClass'); 
for (var i = 0; i < all.length; i++) { 
    all[i].style.color = 'red'; 
} 

नोट: हर्षित के रूप में बताया getElementsByClassName IE में काम नहीं करेगा। जुड़ा हुआ सवाल इस सीमा के आसपास काम करने के लिए एक अच्छा तरीका है

• javascript document.getElementsByClassName compatibility with IE

Answer 2

आप उदाहरण कड़ाके की धूप के लिए चयनकर्ता पुस्तकालय का उपयोग कर सकते: http://sizzlejs.com/ लेकिन अगर आप शुद्ध जे एस कि मैं आप अनुमान लगा रही के साथ फंस रहे हैं चाहते हैं

0123:

यह आपके JQuery oneliner के बराबर है: सभी तत्वों, और उसके बाद प्रोग्राम के लोगों को है कि कक्षाओं में आप उदाहरण के लिए इस तरह रेगुलर एक्सप्रेशन से उपयोग करने में रुचि रखते हैं "handpicking"

for(i in document.all) document.all[i].className && /\bpost-text\b/g.test(document.all[i].className) && (document.all[i].style.color = "red") 

:)

आप कर सकते हैं आप एक पंक्ति में इसकी जरूरत नहीं है, तो यह तेजी से (और भी बहुत कुछ पठनीय):

var myClassName = "someClass"; 
var regexp = RegExp("\\b"+myClassName+"\\b/g"); 
var elements = document.all; 
for(i in elements){ 
    var this_element = elements[i]; 
    if(regexp.test(this_element.className){ 
    this_element.style.color = "red"; 
    } 
} 

"हैं के लिए (मैं ऑब्जेक्ट में) "आपके लिए काम नहीं करता है, बस लूप के लिए क्लासिक का उपयोग करें" (var i = 0; मैं < तत्व। लम्बाई; i ++) "।

यह हो सकता है 'सजा' कुछ थोड़ा और अधिक उन्नत जे एस अवधारणाओं (सरणी समारोह मैपिंग के उपयोग के साथ एक सा, तह और इस तरह के) है, जो जे एस संस्करण आप के खिलाफ कोडिंग कर रहे हैं? मैं लगता है कि यह, ECMA स्क्रिप्ट 5 नहीं है ना?

इसके अलावा, इस प्रश्न की जाँच/जवाब देने Get All Elements in an HTML document with a specific CSS Class

Answer 3

क्या आप बदलना चाहते हैं शैली पत्रक है, मुझे लगता है? जावास्क्रिप्ट में संभव Thats, देख

• Quirksmode: Change CSS
• Totally Pwn CSS with Javascript (in Internet Archive)
• Is the only way to change a style to do it per-element in JavaScript? (संभव डुप्लिकेट)

मुझे डर है कि के लिए कोई पुस्तकालय नहीं है हूँ, मैं वास्तव में एक देखना चाहेंगे ...

Answer 4

आप उपयोग कर सकते हैं:

document.getElementById("MyElement").className = "NewClass"; 

तत्व के वर्ग बदलने के लिए और फिर बस अपने सीएसएस फ़ाइल

Answer 5

var all = document.getElementsByClassName('someClass'); 
for (var i = 0; i < all.length; i++) { 
    all[i].className += " red"; 
} 

में है कि नए वर्ग के लिए शैली को परिभाषित बेहतर कोडिंग शैली के लिए अन्य वर्ग को जोड़ने ऊपर दिए गए कोड वाले तत्वों के लिए और फिर इस तरह के सभी तत्वों के रंग को बदलने के लिए सीएसएस का उपयोग करें:

.red { 
    color:red; 
}