19.12.2024

Mudando Estilos CSS Não Inline com JavaScript

Resposta Rápida

Para mudar estilos CSS usando JavaScript, você pode usar a sintaxe element.style.cssProperty. Essa abordagem é adequada para tarefas simples. Por exemplo, se queremos mudar a cor do texto de um parágrafo com o ID 'meuParágrafo', podemos fazer da seguinte forma:

// JavaScript colore o texto de vermelho
document.getElementById('meuParágrafo').style.color = 'red';

Para propriedades CSS que são escritas com hífens, você precisa usar a notação camelCase. Para aumentar o tamanho da fonte, você pode executar o seguinte código:

// JavaScript comanda: "Fonte, fique maior!"
document.getElementById('meuParágrafo').style.fontSize = '20px';

No entanto, se você precisar gerenciar estilos que não estão definidos como estilos inline, ou se quiser alterar estilos para múltiplos elementos, é mais conveniente trabalhar diretamente com folhas de estilo.

Indo Mais a Fundo nas Folhas de Estilo

O JavaScript fornece acesso a todas as folhas de estilo em um documento através do objeto document.styleSheets, que permite um estilo CSS flexível:

function modificarRegra(seletor, prop, valor) {
  Array.from(document.styleSheets).some(sheet => {
      return Array.from(sheet.cssRules).some(rule => {
        if(rule.selectorText === seletor) {
          rule.style[prop] = valor;
          return true;
        }
      });
    });
}
// JavaScript, tornando-se invisível, começa a busca por estilos

A função modificarRegra do exemplo acima se torna seu assistente ninja no mundo das folhas de estilo, localizando o seletor necessário e mudando a propriedade desejada.

Adicionando Novas Regras "Nas Horas"

É também possível criar uma nova folha de estilo e adicionar novas regras a ela:

// Conheça seu novo estilista em JavaScript
let folha = document.createElement('style');
document.head.appendChild(folha);
folha.sheet.insertRule('body { background-color: yellow; }', 0);

Neste exemplo, criamos uma nova folha de estilo e adicionamos uma regra que colore o fundo de um amarelo brilhante.

Verificando a Compatibilidade com Navegadores

Ao trabalhar com estilos através do JavaScript, é importante considerar a compatibilidade com diferentes navegadores. Por exemplo, as propriedades cssRules e rules podem se comportar de maneiras diferentes. No caso do Firefox 25+, as seguintes opções são fornecidas para CSSStyleRule.style:

if('CSSStyleRule' in window) {
 // Esta mensagem é para os usuários do Firefox!
 document.styleSheets[0].insertRule(seletor+' { '+propriedade+': '+valor+'; }', 0);
}

Para sobrescrever outra regra, você pode precisar usar "!important":

regra.style.setProperty('color', 'blue', 'important');
// Apresentando: a cor azul em seu estilo mais importante

Mudanças de Estilo Interativas

Torne as interações com o site mais dinâmicas mudando estilos com base nas ações do usuário. Por exemplo:

document.getElementById('botaoInterativo').addEventListener('mouseover', function() {
  modificarRegra('.textoDinâmico', 'color', 'green');
  // Embora não possamos te transformar no Hulk, o texto verde ao passar o mouse nos aproxima!
});

Agora, quando o cursor pairar sobre o botão, o texto mudará para verde.

Visualização

Pense na capacidade de mudar estilos com JavaScript como uma espécie de superpoder:

Superpoder: a capacidade de mudar cores a qualquer momento! 💥🎨 (graças ao JavaScript)

Usando esse "superpoder", você pode mudar o ambiente como se estivesse "pintando" ele:

document.getElementById('meuQuarto').style.backgroundColor = 'blue';
// E, de repente, tudo ao redor fica azul. Seu quarto se transformou em um oceano!

Template Consciente da Especificidade

Para evitar conflitos de estilos ao mudá-los através do JavaScript, lembre-se da prioridade do CSS:

1. Estilos inline (têm a prioridade mais alta)
2. IDs
3. classes, pseudo-classes, seletores de atributo
4. Elementos e pseudo-elementos

Desempenho das Nossas Soluções

Problemas de desempenho podem surgir de mudanças frequentes no DOM ou estilos. Para otimizar, você deve:

• Agrupar mudanças no DOM.
• Minimizar recalculações de estilos.
• Preferencialmente, usar a aplicação de classes em vez de mudanças diretas de estilo.

Recursos Úteis

1. HTMLElement: propriedade style - Web API | MDN – um guia detalhado sobre como mudar CSS usando JavaScript diretamente em elementos.
2. JavaScript DOM CSS – uma descrição completa de como mudar estilos HTML usando JavaScript.
3. Atualizando uma variável CSS usando JavaScript | CSS-Tricks – uma discussão sobre métodos para atualizar dinamicamente variáveis CSS via JS.
4. Adicionando regras a folhas de estilo com JavaScript – um guia sobre como adicionar regras a folhas de estilo usando código.
5. Estilos e Classes – uma visão geral das funções JavaScript para estilizar e mudar classes.
6. html - Como posso mudar a classe de um elemento com JavaScript? - Stack Overflow – uma discussão de várias maneiras de mudar a classe CSS de um elemento usando JS.
7. html - Como aplicar CSS a um iframe? - Stack Overflow – métodos para aplicar CSS a um elemento iframe usando JavaScript.

Video

Navigation