Como é possível alterar dinamicamente os estilos de…

Pode usar as seguintes abordagens:

Alterar a propriedade style do elemento: A forma mais simples, modifica diretamente os estilos inline.

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

Adicionar/remover classes CSS: Abordagem mais flexível, baseada em estilos predefinidos em CSS. As alterações de estilo ocorrem ao aplicar ou remover classes.

const element = document.getElementById('myElement');
element.classList.add('active'); // adiciona a classe 'active'
element.classList.remove('inactive'); // remove a classe 'inactive'
element.classList.toggle('visible'); // alterna a classe 'visible'

Em CSS:

.active {
    background-color: yellow;
}
.inactive {
    display: none;
}
.visible {
    opacity: 1;
}

Alterar variáveis CSS (Propriedades personalizadas CSS): Permite alterar os valores das variáveis usadas em CSS, influenciando os estilos de vários elementos ao mesmo tempo.

const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');

Em CSS:

:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}

element.setAttribute('style', '...'): Menos recomendado que element.style, pois sobrescreve todos os estilos inline.

const element = document.getElementById('myElement');
element.setAttribute('style', 'color: green; border: 1px solid black;');

Criar e inserir elemento <style>: Permite adicionar novas regras CSS dinamicamente na página.

const style = document.createElement('style');
style.innerHTML = '#myElement { background-color: lightblue; }';
document.head.appendChild(style);

Alterar folhas de estilo (document.styleSheets) : Interação direta com objetos Style Sheet. Considerado mais complexo e menos comum no desenvolvimento cotidiano.

A escolha do método depende da tarefa: element.style é conveniente para pequenas alterações pontuais; classes são preferíveis para gerir estados e estilos complexos; variáveis CSS são úteis para temas e configurações globais.

Como é possível alterar dinamicamente os estilos de um elemento numa página web?