Alterar propriedade CSS usando JavaScript

Para alterar uma propriedade CSS com JavaScript, selecione o elemento desejado e defina uma propriedade no objeto style. Para um conjunto de estilos relacionados, adicione uma classe CSS. Use um ID ou seletor CSS para um elemento e uma coleção baseada em classe quando precisar atualizar todas as correspondências. O navegador fornece o objeto document; jQuery é opcional.

Altere uma propriedade CSS com element.style

Use element.style quando precisar definir um único estilo inline. Em JavaScript, nomes de propriedades CSS com hífen usam camelCase: border-color vira borderColor. Este pequeno exemplo de teste permite executar o padrão de seleção e atribuição em um ambiente JavaScript; em uma página, document é o documento real do navegador.

Execute este exemplo:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

A atribuição a style altera o estilo inline do elemento. Ela não edita uma regra da folha de estilos nem remove outros estilos. No código do navegador, a seleção correspondente é document.getElementById("email"); verifique o valor retornado antes de ler ou alterar suas propriedades.

Aplique vários estilos com uma classe CSS

Uma classe é mais fácil de manter quando um estado exige várias declarações coordenadas. Defina uma classe na folha de estilos e use classList.add() para aplicá-la e classList.remove() para removê-la. Por exemplo, uma classe de erro de entrada pode definir uma borda vermelha e texto vermelho. classList preserva as outras classes do elemento.

Atribuir element.className = "input-error" também altera o atributo de classe, mas substitui toda a cadeia de classes. Classes existentes, como as de layout ou validação, são perdidas se não forem incluídas na nova cadeia. Use classList para adicionar ou remover classes individualmente; use className quando quiser substituir todas as classes de propósito.

Selecione elementos por classe com getElementsByClassName

document.getElementsByClassName("input-blue-border") retorna uma HTMLCollection dinâmica dos elementos correspondentes, não um array. Ela é atualizada quando elementos correspondentes entram ou saem do documento. Para alterar todas as correspondências atuais, percorra a coleção com um laço for...of e atualize o estilo ou a lista de classes de cada elemento. Se precisar de métodos de array, converta primeiro a coleção com Array.from(...).

Também é possível chamar o método em um elemento para encontrar elementos descendentes correspondentes dentro dele. O argumento é o nome da classe sem o ponto inicial; use .input-blue-border somente com uma API de seletores CSS, como querySelector().

Selecione um elemento com getElementById ou querySelector

document.getElementById("email") procura um elemento pelo ID e retorna o elemento correspondente ou null. Os IDs devem ser únicos no documento; IDs duplicados são marcação inválida, então não dependa de qual elemento será retornado.

document.querySelector(".input-blue-border") aceita um seletor CSS e retorna o primeiro elemento correspondente, ou null se não houver nenhum. Ele pode selecionar por ID (#email), classe (.input-blue-border) ou tag (input). Embora aceite um seletor que possa corresponder a vários elementos, querySelector() retorna somente a primeira correspondência. Verifique se o resultado não é null antes de alterar o estilo ou as classes.

Escolha um seletor e trate correspondências ausentes ou múltiplas

Escolha o seletor conforme o elemento desejado e a quantidade de elementos a atualizar: use getElementById para um elemento com ID exclusivo ou querySelector() quando um seletor CSS for mais conveniente e você precisar apenas da primeira correspondência. Use getElementsByClassName quando quiser alterar todos os elementos de uma classe. Para uma única declaração de estilo, defina element.style; para um estado identificado por várias declarações, alterne uma classe.

Um seletor pode não encontrar o elemento se ele ainda não estiver no documento, se o ID ou a classe estiver escrito incorretamente ou se a marcação ainda não tiver sido carregada. Faça a seleção depois que a marcação relevante existir ou verifique o valor retornado antes de acessar style ou classList. Por exemplo, no navegador: const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. Para atualizar apenas um item de uma coleção de classes, escolha-o deliberadamente; para atualizar todos, percorra a coleção.

Resumo

Primeiro, selecione o elemento desejado. Defina uma única declaração inline com element.style ou use classList para aplicar um conjunto de estilos sem perder as classes existentes. getElementById seleciona pelo ID, querySelector() retorna a primeira correspondência do seletor CSS e getElementsByClassName fornece uma coleção dinâmica para atualizar todas as correspondências da classe. Verifique o resultado de uma seleção de elemento único antes de usá-lo e percorra a coleção quando a tarefa envolver vários elementos.