Estilos CSS con JavaScript

En la pared del taller ya hay una muestra de pintura. El título dice Oak y la pastilla dice open. La regla #swatch de la hoja pone color en navy y font-size en 16px. La clase dusk todavía no está en la pastilla. Su regla es font-style: italic. Cambiar el CSS desde JavaScript es escribir el estilo en línea o añadir esa clase. La palabra open no se toca.
element.style solo muestra declaraciones en línea. Por eso swatch.style.color y swatch.style.fontSize son cadenas vacías antes de escribir nada. El tamaño usado lo da getComputedStyle(swatch).fontSize: 16px.
swatch.style.color = "teal" y swatch.style.fontSize = "22px" guardan esos valores en línea. style.font-size con punto es un error de sintaxis. El fondo se pone con setProperty("background-color", "wheat"). Después, getPropertyValue("background-color") y style.backgroundColor leen wheat.
classList.add("dusk") solo añade la clase. style.color sigue en teal, style.fontStyle sigue vacío y getComputedStyle(swatch).fontStyle pasa a italic.
Hay un ensayo aparte: cssText = "color: maroon;". Esa línea sustituye toda la declaración en línea. El tamaño y el fondo en línea quedan vacíos, y la clase dusk se queda. La demo de la página no ejecuta esa línea. Guarda teal y removeProperty("color") borra solo el color en línea. La línea bajo la muestra dice teal / 22px / empty / dusk. El texto de la pastilla sigue siendo open.

La declaración de estilo, no una frase nueva en la muestra

La página anterior escribió textContent, innerHTML e insertAdjacentHTML y cambió las palabras del vale del ferry. Aquí no asignas textContent a la pastilla, no interpretas una etiqueta y no comparas formas de buscar un nodo. getElementById solo te da la muestra. La lección es el estilo en línea y el token de clase.

Qué deja cada escritura en la pastilla

La pastilla empieza con la palabra open. navy y 16px vienen de la hoja, y aún no hay estilo en línea. Lee las filas en orden. La fila de cssText es un ensayo aparte. La demo se detiene en removeProperty y no ejecuta ese borrado.

element.style es solo la declaración en línea. Una regla de la hoja no aparece ahí hasta que un script la copia al estilo en línea. getComputedStyle lee el valor usado cuando ya se juntan la hoja, la clase y el estilo en línea. Una propiedad en línea gana a la hoja en esa misma propiedad. classList cambia el token de clase. No escribe style.color ni style.fontStyle. cssText sustituye todo el atributo style con una cadena. removeProperty borra una propiedad en línea y deja el resto.

Lee la muestra antes de escribir

El archivo abre con el título Oak, el texto open y la hoja de arriba. No hay ninguna asignación. Los tres primeros registros preguntan el estilo en línea. El cuarto pregunta el tamaño usado.

Los registros son open, una cadena vacía, una cadena vacía y 16px. El color usado es navy y el navegador lo informa en forma rgb(), no con la palabra navy. style.color sigue vacío, así que ese registro no es navy. El título Oak es otro elemento. Las escrituras posteriores no cambian la palabra open.

camelCase escribe los valores en línea

color y fontSize son propiedades de la declaración. El nombre CSS font-size pasa a fontSize en JavaScript. Un style.font-size con punto es una resta, así que el archivo no lo usa.

Los registros son teal, 22px y una cadena vacía. El fondo aún no está puesto. El tamaño usado ahora es 22px, porque el valor en línea gana a los 16px de la hoja. La palabra de la pastilla sigue siendo open.

Un nombre con guion pasa por setProperty

setProperty recibe el nombre CSS, guion incluido. getPropertyValue lee ese mismo nombre. La propiedad backgroundColor lee el valor que acabas de guardar.

Los dos registros son wheat. color sigue en teal y fontSize sigue en 22px. Esta llamada añade una propiedad en línea. No borra las que ya estaban.

La clase no llena style.fontStyle

.dusk dice font-style: italic. Añadir la clase pone el token dusk en el elemento. El valor italic vive en la regla de la hoja, así que la cadena en línea fontStyle queda vacía. El color en línea sigue en teal: la clase no lo sustituyó.

Los registros son true, teal, una cadena vacía e italic. contains mira el token. style.fontStyle mira la declaración en línea. getComputedStyle mira el valor usado. Son tres lecturas distintas.

cssText sustituye todo el estilo en línea

Este bloque es un ensayo aparte. Ejecútalo solo cuando teal, 22px, wheat y dusk ya estén puestos. Asignar cssText escribe un atributo style nuevo y suelta cada propiedad en línea que no esté en esa cadena. La demo de más abajo no incluye esta línea.

Los registros son maroon, una cadena vacía, una cadena vacía y true. Desaparecen los 22px en línea y wheat. La clase dusk sigue, porque cssText toca el atributo style, no el atributo class. El texto de la pastilla sigue siendo open.

Una línea bajo la muestra

El script está al final de body, cuando la muestra y la hoja ya existen. Pone teal, 22px y wheat, añade dusk, guarda la palabra teal y quita solo el color en línea. No asigna cssText. Escribe el color en línea vacío como la palabra empty para que la línea se lea bien.

La línea dice teal / 22px / empty / dusk. saved guarda teal de antes de removeProperty. Después de la llamada, style.color está vacío y style.fontSize sigue en 22px. El fondo sigue en wheat. El token de clase sigue en dusk, así que el font-style usado es italic. El color usado vuelve a la hoja, navy, porque el color en línea ya no está. El texto de la pastilla sigue siendo open. La página siguiente crea elementos nuevos. No trae otra forma de escribir estas propiedades de estilo.

Comprueba la muestra

1. Registra el texto, las dos cadenas en línea y el tamaño calculado, y espera open, dos cadenas vacías y 16px
2. Pon color en teal y fontSize en 22px, y espera teal, 22px y un backgroundColor vacío
3. Pon el fondo con setProperty y espera wheat en las dos lecturas; luego añade dusk y espera true, teal, un fontStyle vacío e italic calculado
4. En el ensayo aparte, asigna cssText al color maroon y espera maroon, un fontSize vacío, un fondo vacío y dusk todavía true
5. Lee la línea de la página y espera teal / 22px / empty / dusk, y lee el texto de la pastilla y espera open

Fallos en esta muestra

La página sigue abriéndose. La asignación escribió el tipo de valor equivocado.

• Leer style.color al principio y esperar navy
• Escribir swatch.style.font-size, que el analizador rechaza
• Esperar que classList.add("dusk") guarde italic en style.fontStyle
• Esperar que esa clase cambie style.color y lo saque de teal
• Asignar cssText y esperar que el tamaño en línea 22px siga
• Asignar cssText y esperar que desaparezca la clase dusk
• Llamar a removeProperty("color") y esperar que fontSize vuelva a 16px
• Poner textContent en la pastilla aquí; la página anterior cambió palabras
• Llamar a createElement aquí; la página siguiente crea nodos nuevos

Quédate con esto

• element.style lee declaraciones en línea: al principio style.color está vacío y el tamaño usado es 16px
• style.color y style.fontSize guardan teal y 22px
• setProperty("background-color", "wheat") coincide con style.backgroundColor
• classList.add("dusk") deja style.fontStyle vacío y el estilo usado en italic
• cssText = "color: maroon;" borra los otros valores en línea y conserva la clase
• removeProperty("color") borra solo el color, así la línea de la página aún puede mostrar 22px
• La línea dice teal / 22px / empty / dusk y el texto de la pastilla sigue en open