WEBVTT

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

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

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

00:00:14.671 --> 00:00:18.076
Y eso realmente podría estorbar tu JavaScript.

00:00:18.076 --> 00:00:20.666
Hay otra manera de hacer esto.

00:00:20.666 --> 00:00:23.213
Podemos crear una clase de CSS,

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

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

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

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

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

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

00:00:58.854 --> 00:01:05.813
'headingEl.className = "catcolors";'

00:01:05.813 --> 00:01:09.485
Y podemos borrar la asignación de color

00:01:09.485 --> 00:01:12.222
y de color de fondo en JavaScript.

00:01:12.222 --> 00:01:13.322
¡Tan tan!

00:01:13.322 --> 00:01:15.113
Esto funciona.

00:01:15.113 --> 00:01:17.466
Ahora, ¿notaron algo raro?

00:01:17.466 --> 00:01:21.249
El atributo de HTML para nombres de clases es justamente "class".

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

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

00:01:31.589 --> 00:01:33.806
que no estamos acostumbrados a usar.

00:01:33.806 --> 00:01:39.084
Y eso es porque "class" es en realidad un palabra clave en el lenguaje JavaScript

00:01:39.084 --> 00:01:42.613
que tiene un significado especial para el lenguaje.

00:01:42.613 --> 00:01:47.534
Así que por eso los navegadores usan "className" para referirse

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

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

00:01:56.613 --> 00:02:00.333
debes escribir: punto "className" igual (.className=).

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

00:02:04.383 --> 00:02:06.657
podemos ponerlo dentro del ciclo, entonces:

00:02:06.657 --> 00:02:13.449
'nameEls[i].className = "catcolors";'

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

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

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

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

00:02:32.053 --> 00:02:34.340
Y ahora se han convertido en "catcolors".

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

00:02:41.305 --> 00:02:47.562
Y podemos hacer eso escribiendo "+= catcolors".

00:02:47.562 --> 00:02:48.828
Muy bien.

00:02:48.828 --> 00:02:52.044
Es seguro hacer esto, porque tomará la clase,

00:02:52.044 --> 00: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.

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

00:03:02.209 --> 00:03:04.975
usando la propiedad "classList".

00:03:04.975 --> 00:03:15.795
Para hacer esto escribimos:
'nameEls[i].classList.add("catcolors");'.

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

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

00:03:24.014 --> 00:03:26.532
y asegurarte de que funcione en todos los navegadores

00:03:26.532 --> 00:03:28.756
en los que quieres que funcione tu página web.

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

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

00:03:36.254 --> 00:03:38.143
Así que yo lo voy a comentar,

00:03:38.143 --> 00:03:41.337
porque quiero que mi página funcione en muchos navegadores.

00:03:41.337 --> 00:03:46.067
Hay muchas veces en las que queremos cambiar estilos individuales,

00:03:46.067 --> 00:03:48.558
en lugar de asignarles nombres de clases.

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

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