JavaScript: Alterando estilos CSS

JavaScript: Alterando estilos CSS

  7 de junho de 2018    henrique

---

    Uma boa prática em JS é alterar estilos CSS através do próprio CSS, alterando as classes dos elementos HTML, mesmo sendo possível alterar os estilos dentro do JS. Para alterar as classes podemos utilizar o classList para acessar a lista de classes do elemento e o add para adicionar uma classe, vamos a um exemplo:

Quero alterar uma linha de uma tabela de alunos e quando o aluno estiver abaixo da média de notas seja adicionada a classe CSS aluno-abaixoMedia:

aluno.classList.add("aluno-abaixoMedia");

Essa classe aluno-abaixoMedia pode conter os códigos CSS que eu quiser e repare que o . da classe não é adicionado, apenas o nome.

    Mesmo assim caso você tenha a necessidade de alterar um estilo dentro do JS, você pode utilizar o style como seria seguindo o exemplo anterior, aluno.style.estiloQueEuQuiser. Vale ressaltar que caso a propriedade CSS que estou alterando contenha mais de uma palavra, no CSS é separada por - no JS deve ser escrita junta utilizando camel case, como text-align deve ser textAlign