Alterar classes CSS em JavaScript
Sempre que estamos trabalhando com os elementos DOM dentro do JavaScript, há momentos e situações em que precisamos fornecer algumas interações para os elementos HTML. Por exemplo, alterar as cores de fundo de um elemento no clique do usuário, ocultar um elemento, modificar a aparência de um elemento, etc. Isso pode ser feito na maioria das vezes alterando as classes.
A linguagem JavaScript fornece diferentes maneiras de fazer tudo isso. Vamos ver vários métodos com os quais podemos alterar as classes CSS dos elementos HTML.
Várias maneiras de alterar a classe CSS em JavaScript
Abaixo, temos um documento HTML que consiste em um único elemento div dentro da tag body. Também temos uma tag style que contém um id e duas classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
O id com o nome dimensions contém a largura e a altura. Os bg_1 e bg_2 são duas classes que têm uma propriedade de background-color com as cores crimson e teal, respetivamente. A dimensions e bg_1 são aplicados ao elemento HTML dentro da tag body.
A partir do código, você pode ver que já armazenamos o elemento div dentro da variável myDiv usando o método document.getElementById() e passando o id dos elementos (neste caso, dimensions) como uma string dentro dele.
Nosso objetivo aqui é alterar a cor de fundo do elemento div de carmesim para azul-petróleo, alterando a classe bg_1 com bg_2. Isso será feito apenas quando o usuário estiver no elemento div. Para isso, também adicionamos o evento onClick usando o método addEventListener() na variável myDiv dentro do JavaScript.
Estaremos seguindo várias maneiras de conseguir isso, conforme mostrado abaixo. Todo o código que escreveremos abaixo irá dentro do método addEventListener() sob a tag script.
Usando o método className
A maneira mais fácil de alterar uma classe CSS em JavaScript é usando o método className. Usando este método, você pode substituir quaisquer classes existentes já presentes no elemento HTML por algumas outras classes. Você pode especificar todas as novas classes que deseja adicionar como uma string com separação de espaço.
myDiv.className = 'bg_2';
Observe que isso substituirá todas as classes existentes presentes no elemento pelas novas classes.
Usando os métodos classList.remove e classList.add
Todas as classes presentes no elemento HTML podem ser acessadas com a ajuda do método classList. Usando classList.remove, você pode remover uma classe específica, e usando classList.add, você pode adicionar novas classes ao elemento. Em nosso exemplo, primeiro removeremos a classe bg_1 usando classList.remove e, em seguida, adicionaremos uma nova classe, ou seja, bg_2 usando classList.add como mostrado abaixo.
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
É assim que mudamos as classes CSS usando esses métodos.
Usando o método classList.replace()
Outra maneira de alterar a classe CSS é usando o método classList.replace(). Este método leva dois argumentos, o primeiro é a classe existente que já está presente no elemento que deseja substituir (neste caso bg_1), e o segundo é a nova classe que você deseja adicionar ao elemento (Em neste caso bg_2).
myDiv.classList.replace('bg_1', 'bg_2');
Estes são alguns dos métodos com os quais podemos alterar as classes CSS em JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn