1
00:00:00,000 --> 00:00:04,040
Ok, ahora sabes cómo cambiar el contenido de un elemento

2
00:00:04,051 --> 00:00:06,441
y los valores de sus atributos.

3
00:00:06,441 --> 00:00:11,383
¿Qué nos falta? Bueno, ¿qué pasa si queremos cambiar su estilo?

4
00:00:11,383 --> 00:00:15,534
Normalmente, lo haríamos en CSS, pero hay veces que

5
00:00:15,534 --> 00:00:20,432
quisiéramos hacerlo en JavaScript, como cuando quieres poner animación en los estilos o

6
00:00:20,432 --> 00:00:25,944
cambiarlos después de que el usuario presiona el ratón en algo, lo cual vamos a ver pronto cómo se hace, lo prometo.

7
00:00:25,944 --> 00:00:29,747
Déjenme cambiar el estilo de este encabezado.

8
00:00:29,747 --> 00:00:33,415
Si lo hacemos en CSS, se vería como sigue:

9
00:00:33,415 --> 00:00:38,549
"#heading" para seleccionar por "Id", y luego decimos: "color: orange".

10
00:00:38,549 --> 00:00:42,476
¡Tan tan! Es naranja, así como el gato.

11
00:00:42,476 --> 00:00:46,036
Ahora, para hacerlo en JavaScript,

12
00:00:46,036 --> 00:00:49,932
primero encontramos los elementos de encabezado, los cuales tenemos aquí.

13
00:00:49,932 --> 00:00:55,655
Luego, vamos a acceder a su atributo de estilo con ".style".

14
00:00:55,655 --> 00:01:00,916
Luego, accedemos a la propiedad en la que estamos interesados: "color",

15
00:01:00,916 --> 00:01:04,617
y le asignamos un nuevo valor.

16
00:01:04,617 --> 00:01:11,345
Vamos a borrar la propiedad en CSS para ver si funciona. ¡Sí!, funciona.

17
00:01:11,345 --> 00:01:16,618
Ahora, fíjense que aquí abajo tenemos dos puntos porque en realidad estamos accediendo

18
00:01:16,618 --> 00:01:22,122
a dos objetos. Uno de ellos es el objeto elemento y el otro es el objeto estilo,

19
00:01:22,122 --> 00:01:27,004
que contiene todos los estilos para ese elemento como propiedades diferentes.

20
00:01:27,004 --> 00:01:31,632
¿Qué pasa si queremos cambiar el color de fondo de ese encabezado?

21
00:01:31,632 --> 00:01:37,548
En CSS, eso se podría hacer con "backgroun-color: black;"

22
00:01:37,548 --> 00:01:40,996
Vamos a tratar de hacerlo en JavaScript.

23
00:01:40,996 --> 00:01:49,378
Entonces escribimos: 'headingEl.style.background-color = "black";'

24
00:01:49,378 --> 00:01:53,977
Oh oh. Tenemos un error.
En realidad esto es invalido en JavaScript,

25
00:01:53,977 --> 00:01:57,412
porque los nombres de las propiedades no pueden contener guiones.

26
00:01:57,412 --> 00:02:02,372
En su lugar necesitamos convertir este nombre de propiedad de CSS a una forma válida

27
00:02:02,372 --> 00:02:11,104
en JavaScript, lo hacemos mediante "camel-casing". 
Que es remover el guión y poner la siguiente letra mayúscula.

28
00:02:11,104 --> 00:02:16,969
Y vamos a probar si funciona borrando esta propiedad que tenemos aquí, sí, sigue negro.

29
00:02:16,969 --> 00:02:21,838
Ahora, que estoy teniendo mucha imaginación, también quiero centrar el encabezado.

30
00:02:21,838 --> 00:02:26,910
Así que voy a añadir una línea aquí abajo:

31
00:02:26,910 --> 00:02:33,790
'headingEl.style.textAlign', que lo modificamos con "camel-casing", '= "center"'.

32
00:02:33,790 --> 00:02:37,916
Una vez más modificamos haciendo "camel-casing" porque tiene dos palabras con un guión,

33
00:02:37,916 --> 00:02:45,298
y ahora tenemos este encabezado que luce como nuestro gato, y también como Halloween. ¡Sí!