Estilos CSS com JavaScript

Na parede do ateliê já há uma amostra de tinta. O título diz Oak e a pastilha diz open. A regra #swatch da folha põe color em navy e font-size em 16px. A classe dusk ainda não está na pastilha. A regra dela é font-style: italic. Mudar o CSS a partir de JavaScript é escrever o estilo em linha ou acrescentar essa classe. A palavra open fica onde está.
element.style só mostra declarações em linha. Por isso swatch.style.color e swatch.style.fontSize são cadeias vazias antes de qualquer escrita. O tamanho usado vem de getComputedStyle(swatch).fontSize: 16px.
swatch.style.color = "teal" e swatch.style.fontSize = "22px" guardam esses valores em linha. style.font-size com ponto é erro de sintaxe. O fundo entra com setProperty("background-color", "wheat"). Depois, getPropertyValue("background-color") e style.backgroundColor leem wheat.
classList.add("dusk") só acrescenta a classe. style.color continua teal, style.fontStyle continua vazio, e getComputedStyle(swatch).fontStyle passa a italic.
Há um ensaio à parte: cssText = "color: maroon;". Essa linha substitui toda a declaração em linha. O tamanho e o fundo em linha ficam vazios, e a classe dusk permanece. A demo da página não executa essa linha. Ela guarda teal e removeProperty("color") apaga só a cor em linha. A linha sob a amostra lê teal / 22px / empty / dusk. O texto da pastilha continua open.

A declaração de estilo, não uma frase nova na amostra

A página anterior escreveu textContent, innerHTML e insertAdjacentHTML e mudou as palavras do bilhete da balsa. Aqui você não atribui textContent à pastilha, não analisa uma etiqueta e não compara formas de achar um nó. getElementById só entrega a amostra. A lição é o estilo em linha e o token da classe.

O que cada escrita deixa na pastilha

A pastilha começa com a palavra open. navy e 16px vêm da folha, e ainda não há estilo em linha. Leia as linhas em ordem. A linha de cssText é um ensaio à parte. A demo para em removeProperty e não executa esse apagamento.

element.style é só a declaração em linha. Uma regra da folha não aparece ali até um script copiá-la para o estilo em linha. getComputedStyle lê o valor usado depois que a folha, a classe e o estilo em linha se juntam. Uma propriedade em linha vence a folha naquela mesma propriedade. classList muda o token da classe. Não escreve style.color nem style.fontStyle. cssText substitui o atributo style inteiro por uma cadeia. removeProperty apaga uma propriedade em linha e deixa o resto.

Leia a amostra antes de escrever

O arquivo abre com o título Oak, o texto open e a folha acima. Nenhuma atribuição correu. Os três primeiros registos perguntam o estilo em linha. O quarto pergunta o tamanho usado.

Os registos são open, uma cadeia vazia, uma cadeia vazia e 16px. A cor usada é navy, e o navegador informa isso em forma rgb(), não com a palavra navy. style.color continua vazio, então esse registo não é navy. O título Oak é outro elemento. As escritas seguintes não mudam a palavra open.

camelCase escreve os valores em linha

color e fontSize são propriedades da declaração. O nome CSS font-size vira fontSize em JavaScript. Um style.font-size com ponto é uma subtração, por isso o arquivo não o usa.

Os registos são teal, 22px e uma cadeia vazia. O fundo ainda não foi posto. O tamanho usado agora é 22px, porque o valor em linha vence os 16px da folha. A palavra na pastilha continua open.

Um nome com hífen passa por setProperty

setProperty recebe o nome CSS, hífen incluído. getPropertyValue lê esse mesmo nome. A propriedade backgroundColor lê o valor que você acabou de guardar.

Os dois registos são wheat. color continua teal e fontSize continua 22px. Esta chamada acrescenta uma propriedade em linha. Não apaga as que já estavam.

A classe não enche style.fontStyle

.dusk diz font-style: italic. Acrescentar a classe põe o token dusk no elemento. O valor italic vive na regra da folha, então a cadeia em linha fontStyle fica vazia. A cor em linha continua teal. A classe não a substituiu.

Os registos são true, teal, uma cadeia vazia e italic. contains olha o token. style.fontStyle olha a declaração em linha. getComputedStyle olha o valor usado. São três leituras diferentes.

cssText substitui todo o estilo em linha

Este bloco é um ensaio à parte. Execute-o só depois de teal, 22px, wheat e dusk já estarem postos. Atribuir cssText escreve um atributo style novo e larga cada propriedade em linha que não esteja nessa cadeia. A demo mais abaixo não inclui esta linha.

Os registos são maroon, uma cadeia vazia, uma cadeia vazia e true. Os 22px em linha e wheat saíram. A classe dusk continua, porque cssText mexe no atributo style, não no atributo class. O texto da pastilha continua open.

Uma linha sob a amostra

O script fica no fim de body, depois que a amostra e a folha existem. Ele põe teal, 22px e wheat, acrescenta dusk, guarda a palavra teal e remove só a cor em linha. Não atribui cssText. Escreve a cor em linha vazia como a palavra empty para a linha continuar legível.

A linha lê teal / 22px / empty / dusk. saved guarda teal de antes de removeProperty. Depois da chamada, style.color está vazio e style.fontSize continua 22px. O fundo continua wheat. O token da classe continua dusk, então o font-style usado é italic. A cor usada volta à folha, navy, porque a cor em linha saiu. O texto da pastilha continua open. A página seguinte cria elementos novos. Não traz outro modo de escrever estas propriedades de estilo.

Confira a amostra

1. Registe o texto, as duas cadeias em linha e o tamanho calculado, e espere open, duas cadeias vazias e 16px
2. Ponha color em teal e fontSize em 22px, e espere teal, 22px e um backgroundColor vazio
3. Ponha o fundo com setProperty e espere wheat nas duas leituras, depois acrescente dusk e espere true, teal, um fontStyle vazio e italic calculado
4. No ensaio à parte, atribua cssText à cor maroon e espere maroon, um fontSize vazio, um fundo vazio e dusk ainda true
5. Leia a linha da página e espere teal / 22px / empty / dusk, e leia o texto da pastilha e espere open

Deslizes nesta amostra

A página continua a abrir. A atribuição escreveu o tipo errado de valor.

• Ler style.color no início e esperar navy
• Escrever swatch.style.font-size, que o analisador recusa
• Esperar que classList.add("dusk") guarde italic em style.fontStyle
• Esperar que essa classe mude style.color e o tire de teal
• Atribuir cssText e esperar que o tamanho em linha 22px fique
• Atribuir cssText e esperar que a classe dusk suma
• Chamar removeProperty("color") e esperar que fontSize volte a 16px
• Pôr textContent na pastilha aqui; a página anterior mudava palavras
• Chamar createElement aqui; a página seguinte cria nós novos

Leve isto

• element.style lê declarações em linha: no início style.color está vazio e o tamanho usado é 16px
• style.color e style.fontSize guardam teal e 22px
• setProperty("background-color", "wheat") coincide com style.backgroundColor
• classList.add("dusk") deixa style.fontStyle vazio e o estilo usado em italic
• cssText = "color: maroon;" apaga os outros valores em linha e mantém a classe
• removeProperty("color") apaga só a cor, por isso a linha da página ainda pode mostrar 22px
• A linha lê teal / 22px / empty / dusk e o texto da pastilha continua open