Ok, ahora sabes cómo cambiar el contenido de un elemento
y los valores de sus atributos.
¿Qué nos falta? Bueno, ¿qué pasa si queremos cambiar su estilo?
Normalmente, lo haríamos en CSS, pero hay veces que
quisiéramos hacerlo en JavaScript, como cuando quieres poner animación en los estilos o
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.
Déjenme cambiar el estilo de este encabezado.
Si lo hacemos en CSS, se vería como sigue:
"#heading" para seleccionar por "Id", y luego decimos: "color: orange".
¡Tan tan! Es naranja, así como el gato.
Ahora, para hacerlo en JavaScript,
primero encontramos los elementos de encabezado, los cuales tenemos aquí.
Luego, vamos a acceder a su atributo de estilo con ".style".
Luego, accedemos a la propiedad en la que estamos interesados: "color",
y le asignamos un nuevo valor.
Vamos a borrar la propiedad en CSS para ver si funciona. ¡Sí!, funciona.
Ahora, fíjense que aquí abajo tenemos dos puntos porque en realidad estamos accediendo
a dos objetos. Uno de ellos es el objeto elemento y el otro es el objeto estilo,
que contiene todos los estilos para ese elemento como propiedades diferentes.
¿Qué pasa si queremos cambiar el color de fondo de ese encabezado?
En CSS, eso se podría hacer con "backgroun-color: black;"
Vamos a tratar de hacerlo en JavaScript.
Entonces escribimos: 'headingEl.style.background-color = "black";'
Oh oh. Tenemos un error. En realidad esto es invalido en JavaScript,
porque los nombres de las propiedades no pueden contener guiones.
En su lugar necesitamos convertir este nombre de propiedad de CSS a una forma válida
en JavaScript, lo hacemos mediante "camel-casing". Que es remover el guión y poner la siguiente letra mayúscula.
Y vamos a probar si funciona borrando esta propiedad que tenemos aquí, sí, sigue negro.
Ahora, que estoy teniendo mucha imaginación, también quiero centrar el encabezado.
Así que voy a añadir una línea aquí abajo:
'headingEl.style.textAlign', que lo modificamos con "camel-casing", '= "center"'.
Una vez más modificamos haciendo "camel-casing" porque tiene dos palabras con un guión,
y ahora tenemos este encabezado que luce como nuestro gato, y también como Halloween. ¡Sí!