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

0:00:05.963,0:00:10.202
Ahora, si estableces muchos estilos en JavaScript, podrías terminar

0:00:10.202,0:00:14.671
con cientos de líneas de código sólo para establecer valores de propiedades de CSS.

0:00:14.671,0:00:18.076
Y eso realmente podría estorbar tu JavaScript.

0:00:18.076,0:00:20.666
Hay otra manera de hacer esto.

0:00:20.666,0:00:23.213
Podemos crear una clase de CSS,

0:00:23.213,0:00:28.275
y añadir una regla de CSS para esa clase con los nuevos estilos que deseamos,

0:00:28.275,0:00:33.116
y luego dinámicamente añadir ese nombre de clase en JavaScript.

0:00:33.116,0:00:38.932
Vamos a probar esto empezando aquí en la etiqueta "".

0:00:38.932,0:00:45.798
Vamos a hacer una clase ".catcolors", y una regla para esta clase.

0:00:45.798,0:00:53.085
Y va a tener "color: orange;", y "background-color: black;".

0:00:53.085,0:00:58.854
Ahora, para asignar esto al elemento "heading", podemos decir:

0:00:58.854,0:01:05.813
'headingEl.className = "catcolors";'

0:01:05.813,0:01:09.485
Y podemos borrar la asignación de color

0:01:09.485,0:01:12.222
y de color de fondo en JavaScript.

0:01:12.222,0:01:13.322
¡Tan tan!

0:01:13.322,0:01:15.113
Esto funciona.

0:01:15.113,0:01:17.466
Ahora, ¿notaron algo raro?

0:01:17.466,0:01:21.249
El atributo de HTML para nombres de clases es justamente "class".

0:01:21.249,0:01:26.779
Si hubiera hecho esto en HTML, esto sería 'class="catcolors"'.

0:01:26.779,0:01:31.589
Pero cuando lo hago en JavaScript, tengo que escribir ".className",

0:01:31.589,0:01:33.806
que no estamos acostumbrados a usar.

0:01:33.806,0:01:39.084
Y eso es porque "class" es en realidad un palabra clave en el lenguaje JavaScript

0:01:39.084,0:01:42.613
que tiene un significado especial para el lenguaje.

0:01:42.613,0:01:47.534
Así que por eso los navegadores usan "className" para referirse

0:01:47.534,0:01:52.205
al atributo "class" de HTML, sólo para asegurarse de no entrar en confusiones.

0:01:52.205,0:01:56.613
Así que recuerda, si quieres establecer el atributo clase para un elemento,

0:01:56.613,0:02:00.333
debes escribir: punto "className" igual (.className=).

0:02:00.333,0:02:04.383
Ahora para asignar eso a cada uno de los nombres de los animales,

0:02:04.383,0:02:06.657
podemos ponerlo dentro del ciclo, entonces:

0:02:06.657,0:02:13.449
'nameEls[i].className = "catcolors";'

0:02:13.449,0:02:19.427
Eso va a añadir el nombre de clase, pero en realidad va a quitar cualquier clase

0:02:19.427,0:02:23.704
que estuviera allí antes, porque lo hicimos "igual a".

0:02:23.704,0:02:28.236
Así que si teníamos ahí alguna clase antes, ahora ya no está.

0:02:28.236,0:02:32.053
Ahora, antes había clases, aquí tenemos 'class="animal"'.

0:02:32.053,0:02:34.340
Y ahora se han convertido en "catcolors".

0:02:34.340,0:02:41.305
Entonces lo que realmente queremos hacer es añadir un nuevo nombre de clase a este atributo de clase.

0:02:41.305,0:02:47.562
Y podemos hacer eso escribiendo "+= catcolors".

0:02:47.562,0:02:48.828
Muy bien.

0:02:48.828,0:02:52.044
Es seguro hacer esto, porque tomará la clase,

0:02:52.044,0:02:58.048
y a cualquier cosa que tenía antes le va a añadir un espacio y va a añadir la nueva clase.

0:02:58.048,0:03:02.209
Hay otra manera de hacer esto en los navegadores nuevos,

0:03:02.209,0:03:04.975
usando la propiedad "classList".

0:03:04.975,0:03:15.795
Para hacer esto escribimos:[br]'nameEls[i].classList.add("catcolors");'.

0:03:15.795,0:03:19.649
Ahora, eso es mejor, pero no funciona en todos lados.

0:03:19.649,0:03:24.014
Así que si quieres usar eso, tienes que ir a "caniuse.com",

0:03:24.014,0:03:26.532
y asegurarte de que funcione en todos los navegadores

0:03:26.532,0:03:28.756
en los que quieres que funcione tu página web.

0:03:28.756,0:03:32.189
Es mucho más bonito, pero no es agradable que tu página web falle

0:03:32.189,0:03:36.254
porque estás usando una función que el navegador no puede soportar.

0:03:36.254,0:03:38.143
Así que yo lo voy a comentar,

0:03:38.143,0:03:41.337
porque quiero que mi página funcione en muchos navegadores.

0:03:41.337,0:03:46.067
Hay muchas veces en las que queremos cambiar estilos individuales,

0:03:46.067,0:03:48.558
en lugar de asignarles nombres de clases.

0:03:48.558,0:03:54.463
Así que una vez más, sólo recuerda que tienes ambas herramientas en tu caja de herramientas,

0:03:54.463,0:03:59.083
y piensa cuál será mejor usar, dependiendo de la situación.