Publicado em 7 de ago.

Mudar classe css3 de div usando JavaScript

Olá pessoal, estou com uma dúvida, já pesquisei mas não encontrei nenhuma solução.

Quero trocar a classe de uma div em css3 por meio de JavaScript. Por exemplo eu clico em um botão e o mesmo chama uma função em JavaScript que vai mudar a classe design1 para a classe design2 desta div.

Abaixo esta o código feito. alguém poderia me ajudar ? Obrigado.

<html>
<head>
	<title></title>
</head>

<style type="text/css">

	.design1{
 background-color: blue;
 width: 200px;
 height: 200px;
 margin-bottom: 30px;

	}

	.design2{
 background-color: yellow;
 width: 250px;
 height: 250px;
 margin-bottom: 30px;

	}

</style>

<script type="text/javascript">

function mudarClasse(){

	document.getElementById("quadrado").style./****Não sei oque colocar aqui para mudar a classe*****/;

}

</script>

<body>

	<div class="design1" id="quadrado"></div>
	<input type="button" name="botao" value="Mudar de classe" onclick="mudarClasse()">

</body>
</html>

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Matheus Tavares· 7 de ago.

Olá amigo, seja bem-vindo.

Você está procurando por isso: https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList

Citando os exemplos:

// div é uma referência de objeto para um elemento <div> com class = "foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// Se estiver visível, remova-o, caso contrário, adicione-o
div.classList.toggle("visible");

// adicionar/remover, dependendo do teste condicional, i menos de 10

div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// adicionar ou remover várias classes

div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

	 

	Lembrando que a variável **div**, no caso dos exemplos, nada mais seria do que o o seu **document.getElementById( 'quadrado' )**.

xDenisX· 7 de ago.

Hey Matheus obrigado. Estou começando agora então estou dando uns tropeços. Muito obrigado pelo material e pelos exemplos me ajudou muito você é o cara !. Abraços !!