0:00:00.000,0:00:04.040
Ok, ahora sabes cómo cambiar el contenido de un elemento

0:00:04.051,0:00:06.441
y los valores de sus atributos.

0:00:06.441,0:00:11.383
¿Qué nos falta? Bueno, ¿qué pasa si queremos cambiar su estilo?

0:00:11.383,0:00:15.534
Normalmente, lo haríamos en CSS, pero hay veces que

0:00:15.534,0:00:20.432
quisiéramos hacerlo en JavaScript, como cuando quieres poner animación en los estilos o

0:00:20.432,0: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.

0:00:25.944,0:00:29.747
Déjenme cambiar el estilo de este encabezado.

0:00:29.747,0:00:33.415
Si lo hacemos en CSS, se vería como sigue:

0:00:33.415,0:00:38.549
"#heading" para seleccionar por "Id", y luego decimos: "color: orange".

0:00:38.549,0:00:42.476
¡Tan tan! Es naranja, así como el gato.

0:00:42.476,0:00:46.036
Ahora, para hacerlo en JavaScript,

0:00:46.036,0:00:49.932
primero encontramos los elementos de encabezado, los cuales tenemos aquí.

0:00:49.932,0:00:55.655
Luego, vamos a acceder a su atributo de estilo con ".style".

0:00:55.655,0:01:00.916
Luego, accedemos a la propiedad en la que estamos interesados: "color",

0:01:00.916,0:01:04.617
y le asignamos un nuevo valor.

0:01:04.617,0:01:11.345
Vamos a borrar la propiedad en CSS para ver si funciona. ¡Sí!, funciona.

0:01:11.345,0:01:16.618
Ahora, fíjense que aquí abajo tenemos dos puntos porque en realidad estamos accediendo

0:01:16.618,0:01:22.122
a dos objetos. Uno de ellos es el objeto elemento y el otro es el objeto estilo,

0:01:22.122,0:01:27.004
que contiene todos los estilos para ese elemento como propiedades diferentes.

0:01:27.004,0:01:31.632
¿Qué pasa si queremos cambiar el color de fondo de ese encabezado?

0:01:31.632,0:01:37.548
En CSS, eso se podría hacer con "backgroun-color: black;"

0:01:37.548,0:01:40.996
Vamos a tratar de hacerlo en JavaScript.

0:01:40.996,0:01:49.378
Entonces escribimos: 'headingEl.style.background-color = "black";'

0:01:49.378,0:01:53.977
Oh oh. Tenemos un error.[br]En realidad esto es invalido en JavaScript,

0:01:53.977,0:01:57.412
porque los nombres de las propiedades no pueden contener guiones.

0:01:57.412,0:02:02.372
En su lugar necesitamos convertir este nombre de propiedad de CSS a una forma válida

0:02:02.372,0:02:11.104
en JavaScript, lo hacemos mediante "camel-casing". [br]Que es remover el guión y poner la siguiente letra mayúscula.

0:02:11.104,0:02:16.969
Y vamos a probar si funciona borrando esta propiedad que tenemos aquí, sí, sigue negro.

0:02:16.969,0:02:21.838
Ahora, que estoy teniendo mucha imaginación, también quiero centrar el encabezado.

0:02:21.838,0:02:26.910
Así que voy a añadir una línea aquí abajo:

0:02:26.910,0:02:33.790
'headingEl.style.textAlign', que lo modificamos con "camel-casing", '= "center"'.

0:02:33.790,0:02:37.916
Una vez más modificamos haciendo "camel-casing" porque tiene dos palabras con un guión,

0:02:37.916,0:02:45.298
y ahora tenemos este encabezado que luce como nuestro gato, y también como Halloween. ¡Sí!