Mudar classe CSS de um elemento com DOM

Veja como é simples fazer a mundança de classe de um elemento com auxílo do DOM.

Resultado:
Aspectos
Javascript:

function CambiarEstilo(id) {
var elemento = document.getElementById(id);
if (elemento.className == “aspecto1”) {
elemento.className = “aspecto2”;
}
else {
elemento.className = “aspecto1”;
}
}

CSS:

.aspecto1 {
border: 1px solid #CCC;
padding: 10px 5px 6px 5px;
background-color: #E4E4E4;
color: #666;
}
.aspecto2{
background-color:#F1D59E;
border: #F2BE84 5px solid;
color: #666;
font-family: “Lucida Sans Unicode”, Verdana, Arial, Georgia;
font-size: 12px;
width:200px;
padding:10px;
}

HTML:

 <p>
<a href=”javascript:CambiarEstilo(‘EjCambioEstilo’)”>Mudar</a>
</p>
<div id=”EjCambioEstilo” class=”aspecto1″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce
pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus
a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh. </p>
</div>

Código completo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”><head><title>CAMBIAR ESTILO 2</title>

<style type=”text/css”>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
}
.aspecto1 {
border: 1px solid #CCC;
padding: 10px 5px 6px 5px;
background-color: #E4E4E4;
color: #666;
}
.aspecto2{
background-color:#F1D59E;
border: #F2BE84 5px solid;
color: #666;
font-family: “Lucida Sans Unicode”, Verdana, Arial, Georgia;
font-size: 12px;
width:200px;
padding:10px;
}
</style>
<script language=”javascript”>
function CambiarEstilo(id) {
var elemento = document.getElementById(id);
if (elemento.className == “aspecto1”) {
elemento.className = “aspecto2”;
}
else {
elemento.className = “aspecto1″;
}
}
</script></head><body>
<p><a href=”javascript:CambiarEstilo(‘EjCambioEstilo’)”>Mudar</a></p>
<div id=”EjCambioEstilo” class=”aspecto1″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce
pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus
a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh. </p>
</div>
</body></html>

Fonte: www.webintenta.com

Um comentário sobre “Mudar classe CSS de um elemento com DOM

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s