Cambiando clases de CSS

En la guía paso a paso anterior, les mostré cómo establecer estilos en JavaScript, como éste.

Ahora, si estableces muchos estilos en JavaScript, podrías terminar

con cientos de líneas de código sólo para establecer valores de propiedades de CSS.

Y eso realmente podría estorbar tu JavaScript.

Hay otra manera de hacer esto.

Podemos crear una clase de CSS,

y añadir una regla de CSS para esa clase con los nuevos estilos que deseamos,

y luego dinámicamente añadir ese nombre de clase en JavaScript.

Vamos a probar esto empezando aquí en la etiqueta "".

Vamos a hacer una clase ".catcolors", y una regla para esta clase.

Y va a tener "color: orange;", y "background-color: black;".

Ahora, para asignar esto al elemento "heading", podemos decir:

'headingEl.className = "catcolors";'

Y podemos borrar la asignación de color

y de color de fondo en JavaScript.

¡Tan tan!

Esto funciona.

Ahora, ¿notaron algo raro?

El atributo de HTML para nombres de clases es justamente "class".

Si hubiera hecho esto en HTML, esto sería 'class="catcolors"'.

Pero cuando lo hago en JavaScript, tengo que escribir ".className",

que no estamos acostumbrados a usar.

Y eso es porque "class" es en realidad un palabra clave en el lenguaje JavaScript

que tiene un significado especial para el lenguaje.

Así que por eso los navegadores usan "className" para referirse

al atributo "class" de HTML, sólo para asegurarse de no entrar en confusiones.

Así que recuerda, si quieres establecer el atributo clase para un elemento,

debes escribir: punto "className" igual (.className=).

Ahora para asignar eso a cada uno de los nombres de los animales,

podemos ponerlo dentro del ciclo, entonces:

'nameEls[i].className = "catcolors";'

Eso va a añadir el nombre de clase, pero en realidad va a quitar cualquier clase

que estuviera allí antes, porque lo hicimos "igual a".

Así que si teníamos ahí alguna clase antes, ahora ya no está.

Ahora, antes había clases, aquí tenemos 'class="animal"'.

Y ahora se han convertido en "catcolors".

Entonces lo que realmente queremos hacer es añadir un nuevo nombre de clase a este atributo de clase.

Y podemos hacer eso escribiendo "+= catcolors".

Muy bien.

Es seguro hacer esto, porque tomará la clase,

y a cualquier cosa que tenía antes le va a añadir un espacio y va a añadir la nueva clase.

Hay otra manera de hacer esto en los navegadores nuevos,

usando la propiedad "classList".

Para hacer esto escribimos:
'nameEls[i].classList.add("catcolors");'.

Ahora, eso es mejor, pero no funciona en todos lados.

Así que si quieres usar eso, tienes que ir a "caniuse.com",

y asegurarte de que funcione en todos los navegadores

en los que quieres que funcione tu página web.

Es mucho más bonito, pero no es agradable que tu página web falle

porque estás usando una función que el navegador no puede soportar.

Así que yo lo voy a comentar,

porque quiero que mi página funcione en muchos navegadores.

Hay muchas veces en las que queremos cambiar estilos individuales,

en lugar de asignarles nombres de clases.

Así que una vez más, sólo recuerda que tienes ambas herramientas en tu caja de herramientas,

y piensa cuál será mejor usar, dependiendo de la situación.