javascript - cambiare stile di una classe

Question

Ho lavorato con jQuery per un po ', ma ora voglio scrivere qualcosa in puro javascript e sta dimostrando di essere impegnativo .. Uno dei miei maggiori problemi al momento è che Non ho trovato un modo per impostare/cambiare lo stile per un corso. Questo non è un problema per gli elementi con id, ma voglio cambiare lo stile di un gruppo di elementi con la stessa classe e non solo per un elemento con un id .. In jQuery vorrei solo scrivere:

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

Non c'è davvero alcuna equivalenza semplice a questo in puro js?

Answer 1

provare il seguente

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

Nota: Come Cheery sottolineato getElementsByClassName non funziona in IE. La questione collegata ha un bel modo per aggirare questa limitazione

• javascript document.getElementsByClassName compatibility with IE

Answer 2

È possibile utilizzare libreria di selezione, ad esempio Sizzle: http://sizzlejs.com/ ma se si vuole JS puri che presumo sono bloccati con ottenere tutti gli elementi, e poi programmaticamente "raccolta manuale" quelli che hanno le classi siete interessati ad utilizzare RegEx in questo modo, per esempio:

questo è l'equivalente del vostro oneliner JQuery:

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

:)

Se non ne hai bisogno in una sola riga è possibile renderlo più veloce (e molto più leggibile):

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"; 
    } 
} 

Se "per (in oggetto) "non funziona per te, usa solo il classico ciclo per" per (var i = 0; i < elements.length; i ++)".

Potrebbe essere 'abbelliti' un po 'con l'uso di alcuni concetti JS leggermente più avanzati (mappature funzione di matrice, piegatura e ad), quale versione JS stai codifica agains? I immagino che non è ECMA script 5, giusto?

Inoltre, controllare la domanda/risposta Get All Elements in an HTML document with a specific CSS Class

Answer 3

che cosa si vuole cambiare è il foglio di stile, immagino? Quello è possibile in Javascript, vedere

• 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? (Eventuali duplicati)

temo non v'è alcuna libreria per questo, mi piacerebbe davvero vedere uno ...

Answer 4

È possibile utilizzare:

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

cambiare la classe dell'elemento e poi basta definire lo stile per quella nuova classe nel file CSS

Answer 5

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

Per una migliore stile di codifica aggiungere un'altra classe agli elementi con il codice sopra e quindi utilizzare CSS per cambiare il colore di tutti gli elementi come questo:

.red { 
    color:red; 
}