Cambiar o intercambiar el CSS de varios elementos HTML a la vez

Tengo aproximadamente 100 <span class="foo">, 100 <span class="bar"> y 100 <span class="baz"> etiquetas en mi documento. Necesito implementar las siguientes operaciones en JavaScript:Cambiar o intercambiar el CSS de varios elementos HTML a la vez

Cambie el fondo todos los foos a rojo, todos los compases a verde, todos los tonos a azul.
Cambie el fondo todos los foos a verde, todos los compases a azul, todos los tonos a rojo.
Cambia el fondo de todos los foos a azul, todos los compases a rojo, todos los reflejos a verde.

Voy a llamar a estas operaciones alrededor de 1000 veces en total, por lo que me gustaría evitar una solución que añade una etiqueta a la <style><head> cada vez que hago una operación.

¿Hay algo más simple o más rápido o mejor que iterar sobre todos los elementos de <span> con document.getElementsByTagName('span'), y cambiando o añadiendo a los .className propiedades DOM para cada elemento?

Fuente

2010-02-21 kat

La manera más simple es usar CSS para hacer esto, en lugar de cambiar los nombres de clase de los elementos. Considere el siguiente marcado y 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>

Usted puede simplemente utilizar javascript para cambiar el nombre de clase en el cuerpo de normal a alternar, para implementar el cambio de color en .foo elementos. Más reglas establecerán colores para bar y baz.

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

Fuente

2010-02-21 15:10:53

Puede asignar una clasificación al cuerpo de su documento para determinar qué configuración de colores se debe utilizar y, a continuación, simplemente diseñar los tramos según corresponda.

por ejemplo:

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

Si va a continuación, cambiar los estilos en la misma página después de un cierto período de tiempo, un pequeño trozo de JS para cambiar la clase del cuerpo va a ser todo lo que se requiere.

Fuente

2010-02-21 15:08:21

Cambiar o intercambiar el CSS de varios elementos HTML a la vez

Respuesta

Cuestiones relacionadas