Cambia o scambia il CSS di più elementi HTML contemporaneamente

Ho circa 100 <span class="foo">, 100 <span class="bar"> e 100 <span class="baz"> tag nel mio documento. Ho bisogno di implementare le seguenti operazioni in JavaScript:Cambia o scambia il CSS di più elementi HTML contemporaneamente

modificare lo sfondo tutte foos al rosso, tutte le barre a verde, tutti bazes al blu.
Cambia lo sfondo di tutti i foos in verde, tutte le barre in blu, tutti i bazes in rosso.
Cambia lo sfondo di tutti i foos in blu, tutte le barre in rosso, tutti i bazes in verde.

chiamerò queste operazioni circa 1000 volte del tutto, quindi mi piacerebbe evitare una soluzione che aggiunge un tag <style> al <head> ogni volta che faccio un'operazione.

C'è qualcosa di più semplice o più veloce o migliore di iterazione su tutti gli elementi <span> con document.getElementsByTagName('span'), e cambiando o aggiungendo alle proprietà .className DOM per ogni elemento?

fonte

2010-02-21 kat

Il modo più semplice è utilizzare CSS per farlo, piuttosto che modificare i nomi di classe degli elementi. Considera il seguente markup e CSS.

.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>

Si può semplicemente utilizzare javascript per cambiare il nome di classe sul corpo da normale ad alternare, per attuare il cambiamento di colore su .foo elementi. Altre regole imposteranno i colori per bar e baz.

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

fonte

2010-02-21 15:10:53

È possibile assegnare al corpo del documento una classe per determinare quale configurazione di colori deve essere utilizzata e quindi semplicemente impostare gli intervalli di conseguenza.

esempio:

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

Se state quindi modificando gli stili sulla stessa pagina dopo un certo periodo di tempo, un piccolo pezzo di JS per cambiare la classe del corpo sarà tutto quello che serve.

fonte

2010-02-21 15:08:21

Cambia o scambia il CSS di più elementi HTML contemporaneamente

risposta

Problemi correlati