-
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í!
