[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:04.04,Default,,0000,0000,0000,,Ok, ahora sabes cómo cambiar el contenido de un elemento
Dialogue: 0,0:00:04.05,0:00:06.44,Default,,0000,0000,0000,,y los valores de sus atributos.
Dialogue: 0,0:00:06.44,0:00:11.38,Default,,0000,0000,0000,,¿Qué nos falta? Bueno, ¿qué pasa si queremos cambiar su estilo?
Dialogue: 0,0:00:11.38,0:00:15.53,Default,,0000,0000,0000,,Normalmente, lo haríamos en CSS, pero hay veces que
Dialogue: 0,0:00:15.53,0:00:20.43,Default,,0000,0000,0000,,quisiéramos hacerlo en JavaScript, como cuando quieres poner animación en los estilos o
Dialogue: 0,0:00:20.43,0:00:25.94,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:25.94,0:00:29.75,Default,,0000,0000,0000,,Déjenme cambiar el estilo de este encabezado.
Dialogue: 0,0:00:29.75,0:00:33.42,Default,,0000,0000,0000,,Si lo hacemos en CSS, se vería como sigue:
Dialogue: 0,0:00:33.42,0:00:38.55,Default,,0000,0000,0000,,"#heading" para seleccionar por "Id", y luego decimos: "color: orange".
Dialogue: 0,0:00:38.55,0:00:42.48,Default,,0000,0000,0000,,¡Tan tan! Es naranja, así como el gato.
Dialogue: 0,0:00:42.48,0:00:46.04,Default,,0000,0000,0000,,Ahora, para hacerlo en JavaScript,
Dialogue: 0,0:00:46.04,0:00:49.93,Default,,0000,0000,0000,,primero encontramos los elementos de encabezado, los cuales tenemos aquí.
Dialogue: 0,0:00:49.93,0:00:55.66,Default,,0000,0000,0000,,Luego, vamos a acceder a su atributo de estilo con ".style".
Dialogue: 0,0:00:55.66,0:01:00.92,Default,,0000,0000,0000,,Luego, accedemos a la propiedad en la que estamos interesados: "color",
Dialogue: 0,0:01:00.92,0:01:04.62,Default,,0000,0000,0000,,y le asignamos un nuevo valor.
Dialogue: 0,0:01:04.62,0:01:11.34,Default,,0000,0000,0000,,Vamos a borrar la propiedad en CSS para ver si funciona. ¡Sí!, funciona.
Dialogue: 0,0:01:11.34,0:01:16.62,Default,,0000,0000,0000,,Ahora, fíjense que aquí abajo tenemos dos puntos porque en realidad estamos accediendo
Dialogue: 0,0:01:16.62,0:01:22.12,Default,,0000,0000,0000,,a dos objetos. Uno de ellos es el objeto elemento y el otro es el objeto estilo,
Dialogue: 0,0:01:22.12,0:01:27.00,Default,,0000,0000,0000,,que contiene todos los estilos para ese elemento como propiedades diferentes.
Dialogue: 0,0:01:27.00,0:01:31.63,Default,,0000,0000,0000,,¿Qué pasa si queremos cambiar el color de fondo de ese encabezado?
Dialogue: 0,0:01:31.63,0:01:37.55,Default,,0000,0000,0000,,En CSS, eso se podría hacer con "backgroun-color: black;"
Dialogue: 0,0:01:37.55,0:01:40.100,Default,,0000,0000,0000,,Vamos a tratar de hacerlo en JavaScript.
Dialogue: 0,0:01:40.100,0:01:49.38,Default,,0000,0000,0000,,Entonces escribimos: 'headingEl.style.background-color = "black";'
Dialogue: 0,0:01:49.38,0:01:53.98,Default,,0000,0000,0000,,Oh oh. Tenemos un error.\NEn realidad esto es invalido en JavaScript,
Dialogue: 0,0:01:53.98,0:01:57.41,Default,,0000,0000,0000,,porque los nombres de las propiedades no pueden contener guiones.
Dialogue: 0,0:01:57.41,0:02:02.37,Default,,0000,0000,0000,,En su lugar necesitamos convertir este nombre de propiedad de CSS a una forma válida
Dialogue: 0,0:02:02.37,0:02:11.10,Default,,0000,0000,0000,,en JavaScript, lo hacemos mediante "camel-casing". \NQue es remover el guión y poner la siguiente letra mayúscula.
Dialogue: 0,0:02:11.10,0:02:16.97,Default,,0000,0000,0000,,Y vamos a probar si funciona borrando esta propiedad que tenemos aquí, sí, sigue negro.
Dialogue: 0,0:02:16.97,0:02:21.84,Default,,0000,0000,0000,,Ahora, que estoy teniendo mucha imaginación, también quiero centrar el encabezado.
Dialogue: 0,0:02:21.84,0:02:26.91,Default,,0000,0000,0000,,Así que voy a añadir una línea aquí abajo:
Dialogue: 0,0:02:26.91,0:02:33.79,Default,,0000,0000,0000,,'headingEl.style.textAlign', que lo modificamos con "camel-casing", '= "center"'.
Dialogue: 0,0:02:33.79,0:02:37.92,Default,,0000,0000,0000,,Una vez más modificamos haciendo "camel-casing" porque tiene dos palabras con un guión,
Dialogue: 0,0:02:37.92,0:02:45.30,Default,,0000,0000,0000,,y ahora tenemos este encabezado que luce como nuestro gato, y también como Halloween. ¡Sí!