Estilos CSS

Podemos definir ou alterar o estilo de CSS de um elemento de HTML do DOM, através do objeto style, presente em cada elemento.

Sintaxe:

elementoHTML.style.propriedadeCss = valor

De notar que os nomes das propriedades devem estar no formato camelCase. Assim a propriedade de CSS ‘background-color’ deve ser escrita como ‘backgroundColor’. O valor deve estar escrito entre aspas ou pelicas.

Exemplo 1:

let h1 = document.getElementById('h1'); 
h1.style.color = 'red';

Exemplo 2:

let h1 = document.getElementById('h1'); 
h1.style.color = 'red'; 
h1.style.backgroundColor = 'yellow'; 
h1.style.border = 'solid 2px blue';

Definir estilos CSS com setAttribute()

Podemos definir um conjunto de propriedades de CSS atribuidas a um elemento usando o método setAttribute(), para o atributo style:

let h1 = document.getElementById('h1'); 
h1.setAttribute("style", "color: navy; background-color: red; font-size: 20px;");

Adicionar/Remover classes de CSS

Podemos adicionar, remover ou alternar classes de CSS de um elemento com as instruções abaixo:

element.classList.add("nome_classe");
element.classList.remove("nome_classe");
element.classList.toggle("nome_classe");

Exemplo:

<html>
   <head>
      <style>
         .red {
            color: red;
         }
      </style>
   </head>
   <body>
      <h1 id='h1'>Estilos CSS </h1>
      <script>
         const h1 = document.getElementById('h1');
         h1.classList.add('red');
         h1.classList.remove('red');
         h1.classList.toggle('red');
      </script>
   </body>