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

2
00:00:05,963 --> 00:00:10,202
Ahora, si estableces muchos estilos en JavaScript, podrías terminar

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

4
00:00:14,671 --> 00:00:18,076
Y eso realmente podría estorbar tu JavaScript.

5
00:00:18,076 --> 00:00:20,666
Hay otra manera de hacer esto.

6
00:00:20,666 --> 00:00:23,213
Podemos crear una clase de CSS,

7
00:00:23,213 --> 00:00:28,275
y añadir una regla de CSS para esa clase con los nuevos estilos que deseamos,

8
00:00:28,275 --> 00:00:33,116
y luego dinámicamente añadir ese nombre de clase en JavaScript.

9
00:00:33,116 --> 00:00:38,932
Vamos a probar esto empezando aquí en la etiqueta "".

10
00:00:38,932 --> 00:00:45,798
Vamos a hacer una clase ".catcolors", y una regla para esta clase.

11
00:00:45,798 --> 00:00:53,085
Y va a tener "color: orange;", y "background-color: black;".

12
00:00:53,085 --> 00:00:58,854
Ahora, para asignar esto al elemento "heading", podemos decir:

13
00:00:58,854 --> 00:01:05,813
'headingEl.className = "catcolors";'

14
00:01:05,813 --> 00:01:09,485
Y podemos borrar la asignación de color

15
00:01:09,485 --> 00:01:12,222
y de color de fondo en JavaScript.

16
00:01:12,222 --> 00:01:13,322
¡Tan tan!

17
00:01:13,322 --> 00:01:15,113
Esto funciona.

18
00:01:15,113 --> 00:01:17,466
Ahora, ¿notaron algo raro?

19
00:01:17,466 --> 00:01:21,249
El atributo de HTML para nombres de clases es justamente "class".

20
00:01:21,249 --> 00:01:26,779
Si hubiera hecho esto en HTML, esto sería 'class="catcolors"'.

21
00:01:26,779 --> 00:01:31,589
Pero cuando lo hago en JavaScript, tengo que escribir ".className",

22
00:01:31,589 --> 00:01:33,806
que no estamos acostumbrados a usar.

23
00:01:33,806 --> 00:01:39,084
Y eso es porque "class" es en realidad un palabra clave en el lenguaje JavaScript

24
00:01:39,084 --> 00:01:42,613
que tiene un significado especial para el lenguaje.

25
00:01:42,613 --> 00:01:47,534
Así que por eso los navegadores usan "className" para referirse

26
00:01:47,534 --> 00:01:52,205
al atributo "class" de HTML, sólo para asegurarse de no entrar en confusiones.

27
00:01:52,205 --> 00:01:56,613
Así que recuerda, si quieres establecer el atributo clase para un elemento,

28
00:01:56,613 --> 00:02:00,333
debes escribir: punto "className" igual (.className=).

29
00:02:00,333 --> 00:02:04,383
Ahora para asignar eso a cada uno de los nombres de los animales,

30
00:02:04,383 --> 00:02:06,657
podemos ponerlo dentro del ciclo, entonces:

31
00:02:06,657 --> 00:02:13,449
'nameEls[i].className = "catcolors";'

32
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

33
00:02:19,427 --> 00:02:23,704
que estuviera allí antes, porque lo hicimos "igual a".

34
00:02:23,704 --> 00:02:28,236
Así que si teníamos ahí alguna clase antes, ahora ya no está.

35
00:02:28,236 --> 00:02:32,053
Ahora, antes había clases, aquí tenemos 'class="animal"'.

36
00:02:32,053 --> 00:02:34,340
Y ahora se han convertido en "catcolors".

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

38
00:02:41,305 --> 00:02:47,562
Y podemos hacer eso escribiendo "+= catcolors".

39
00:02:47,562 --> 00:02:48,828
Muy bien.

40
00:02:48,828 --> 00:02:52,044
Es seguro hacer esto, porque tomará la clase,

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

42
00:02:58,048 --> 00:03:02,209
Hay otra manera de hacer esto en los navegadores nuevos,

43
00:03:02,209 --> 00:03:04,975
usando la propiedad "classList".

44
00:03:04,975 --> 00:03:15,795
Para hacer esto escribimos:
'nameEls[i].classList.add("catcolors");'.

45
00:03:15,795 --> 00:03:19,649
Ahora, eso es mejor, pero no funciona en todos lados.

46
00:03:19,649 --> 00:03:24,014
Así que si quieres usar eso, tienes que ir a "caniuse.com",

47
00:03:24,014 --> 00:03:26,532
y asegurarte de que funcione en todos los navegadores

48
00:03:26,532 --> 00:03:28,756
en los que quieres que funcione tu página web.

49
00:03:28,756 --> 00:03:32,189
Es mucho más bonito, pero no es agradable que tu página web falle

50
00:03:32,189 --> 00:03:36,254
porque estás usando una función que el navegador no puede soportar.

51
00:03:36,254 --> 00:03:38,143
Así que yo lo voy a comentar,

52
00:03:38,143 --> 00:03:41,337
porque quiero que mi página funcione en muchos navegadores.

53
00:03:41,337 --> 00:03:46,067
Hay muchas veces en las que queremos cambiar estilos individuales,

54
00:03:46,067 --> 00:03:48,558
en lugar de asignarles nombres de clases.

55
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,

56
00:03:54,463 --> 00:03:59,083
y piensa cuál será mejor usar, dependiendo de la situación.