Alterar propriedade CSS usando JavaScript

1. Altere a propriedade CSS com getElementsByClassName em JavaScript
2. Altere a propriedade CSS com getElementById em JavaScript
3. Altere a propriedade CSS com querySelector() em JavaScript
4. Conclusão

HyperText Markup Language (HTML) é estático e geralmente burro. Isso significa que ele não tem os recursos para executar pedaços de código com base em condições dinâmicas. Não há provisões para blocos de condição if para mostrar-ocultar certos elementos HTML ou tags se uma condição for satisfeita. Para tais cenários, podemos precisar contar com JavaScript ou jQuery para alterar os estilos CSS de um elemento HTML.

Para alterar o estilo de um elemento HTML, digamos um <div>, devemos selecionar o <div> ou aquele elemento HTML específico exclusivamente. Agora, podemos fazer isso com as seguintes funções da Interface do Documento.

Altere a propriedade CSS com getElementsByClassName em JavaScript

getElementsByClassName pesquisa todo o documento HTML e retorna um array de todos os elementos HTML tendo o nome da classe conforme passado nos parâmetros desta função. Também podemos usá-lo em um elemento para encontrar os subelementos com o nome de classe CSS especificado. A sintaxe para getElementByClassName é a seguinte.

document.getElementsByClassName('green-class'));

Definir estilo usando element.style

Depois de identificarmos o elemento exclusivamente, podemos usar os métodos .style ou .className para alterar seus estilos CSS. Consulte os exemplos a seguir.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

Observe que no método changeStyle() consultamos o elemento de entrada com o método document.getElementsByClassName("input-blue-border"). Ele retorna um array com elementos selecionados. Selecionamos o primeiro elemento do array e alteramos sua cor de borda com .style.borderColor = "red".

Definir estilo usando element.className

Pode-se usar element.className para alterar vários parâmetros de estilo de um elemento HTML, classificando-os como uma classe e atribuindo o nome da classe ao elemento selecionado com element.className. Este método é útil, especialmente em cenários em que precisamos exibir um erro em um campo de entrada. Nesse caso, precisamos alterar a cor da borda do campo de entrada para a cor vermelha e o texto interno da entrada para a cor vermelha. Portanto, podemos agrupar esses estilos como uma classe e atribuí-los ao elemento usando o atributo element.className. O código a seguir ilustra o tratamento de erros.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

A classe input-error tem alguns atributos que definem a cor da borda e a cor da fonte do campo de entrada como vermelho.

Observações

• O método getElementByClassName() retorna um array de elementos que qualificam o valor do nome da classe passado como argumentos.
• getElementByClassName() pode ser usado ao aplicar mudanças de estilo a mais de um elemento, iterando sobre a matriz retornada por este método.
• Depois que o elemento é selecionado, element.style. <Atributo de estilo> define o atributo de estilo específico para o elemento selecionado.
• Da mesma forma, element.className ajuda a definir mais de uma mudança de estilo para o elemento HTML selecionado, batendo esses atributos de estilo como uma classe CSS.

Altere a propriedade CSS com getElementById em JavaScript

Se tivermos um id único atribuído a um elemento HTML, podemos consultá-lo e alterar seu estilo com a função getElementById() da interface Document. É o método mais usado por desenvolvedores da web. Na maioria das vezes, os ids atribuídos a um div serão mantidos exclusivos para que, durante a execução da função getElementById(), outros elementos HTML não sejam selecionados. A sintaxe para getElementById() é conforme ilustrado abaixo.

document.getElementById("parent-1"));

Como selecionamos um elemento único, neste caso, as mudanças de estilo são fáceis de fazer. Os códigos a seguir descrevem os caminhos. É semelhante aos mencionados anteriormente, com a diferença de como consultamos um elemento. Aqui, identificamos exclusivamente os nós HTML com o ID do elemento.

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

Observações

• Ao contrário de getElementByClassName(), o método getElementById() retorna apenas um objeto que é o elemento de nó selecionado pela consulta.
• O HTML pretendido precisa ter um atributo id para que o método getElementById() funcione.
• Se mais de um nó HTML tiver o mesmo id, o método getElementById() retornará o primeiro elemento com o id especificado.
• Ao contrário de getElementByClassName(), as alterações de estilo podem ser aplicadas diretamente no objeto retornado pela função getElementById(), uma vez que retorna um objeto em vez de um array.

Altere a propriedade CSS com querySelector() em JavaScript

O método querySelector() é um superconjunto de recursos oferecidos pelos mecanismos de seleção de elemento. Ele tem o poder combinado dos métodos getElementsByClassName() e getElementById(). Com este método, podemos selecionar o elemento HTML da mesma maneira ao escrever classes CSS. Pode funcionar selecionando um elemento por id, por classe e até mesmo pela tag HTML. Ele se comporta de forma semelhante ao método getElementById() em termos de tipo de retorno. querySelector() retorna apenas o primeiro elemento de nó HTML que satisfaça os critérios mencionados nos parâmetros. A sintaxe usada para querySelector() é a seguinte:

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

Portanto, aqui também o estilo pode ser aplicado ao elemento HTML selecionado adicionando .style.borderColor ou .className. Se usarmos a mesma estrutura HTML e mudarmos o método onclick para changeStyle(), podemos conseguir trazer o novo estilo dinamicamente adicionando o código conforme descrito abaixo no JavaScript:

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

Da mesma forma, se quisermos mudar a classe CSS da entrada, em vez de apenas uma mudança de estilo, precisamos usar o atributo .className() em vez de .style.borderColor no exemplo acima.

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

Observações

• Vale a pena dar uma olhada no tipo de retorno da função document.querySelector(). Em vez de retornar todos os objetos HTML que satisfazem a consulta, ele retorna o primeiro elemento que se ajusta à condição da consulta.
• A beleza de usar o querySelector() é que podemos usá-lo em várias circunstâncias, sejam consultas baseadas no id do elemento HTML ou seja sua classe CSS ou mesmo com o nome da tag HTML.
• Alterar dinamicamente os estilos de mais de um div que satisfaça os critérios da consulta pode não ser possível com querySelector(), pois retorna um objeto em vez de um array de elementos HTML passando os termos da consulta.

Conclusão

Para alterar o estilo de um elemento HTML em tempo de execução, podemos fazer uso dos atributos .style ou .className do elemento HTML selecionado. Os desafios são enfrentados ao selecionar o nó HTML de destino. Existem várias maneiras de selecionar nós HTML exclusivamente. Podemos usar o método getElementsByClassName(), que usa o nome de uma classe CSS para consultar o nó HTML. Ou selecione exclusivamente um elemento atribuindo um id a ele e consultando-o com .getElementById() ou usando o método multifuncional querySelector() que pode atender a todas as circunstâncias, entendendo a consulta com base nos parâmetros passados ​​a ele.