» Cambiar la clase de un elemento con Javascript

Cambiar la clase de un elemento con Javascript

Escrito por J.F. el Lunes, 27 de Agosto del 2007 a las 17:37

Un truquito muy sencillo con Javascript y que puede resultar muy útil consiste en cambiar la clase CSS de un elemento. Por ejemplo, podemos crear varias clases CSS distintas para un formulario, y al realizar las validaciones aplicar una clase u otra. Veamos un sencillo ejemplo que puede resultar útil. Vamos a realizar una validación en un campo de texto normal y corriente, y en caso de que ese campo de texto se deje vacío, vamos a cambiarle la clase por una que mostrará el fondo de la caja amarilla. De esa manera, si tuvieramos un formulario muy grande, sería muy fácil mostrarle al usuario los campos que debe corregir. Veamos en primer lugar las 2 clases CSS que vamos a usar, una por defecto(normal), y la otra(error) en caso de dejar vacío el campo:

TEXTO PLANO

CSS:

<head>

<style type="text/css">

.normal

{

font-size: 10pt;

color:#000000;

background-color:#FFFFFF;

}

.error

{

font-size: 10pt;

color:#000000;

background-color: #FFFF66;

}

</style>

Ahora veremos el código Javascript encargado de realizar el cambio de tipo de clase para el campo de texto. Ésta función será llamada en el evento `onClick` del botón del formulario, como podrás apreciar en el código HTML más abajo.

TEXTO PLANO

JavaScript:

<script>

function cambiaClase()

{

if(document.formulario.nombre.value=="")

{

document.formulario.nombre.className="error";

}

else

{

document.formulario.nombre.className="normal";

}

}

</script>

</head>

Para terminar, veamos el código HTML, que es muy corto y bastante simple de entender con lo ya explicado:

TEXTO PLANO

HTML:

<body>

<form name="formulario">

<input type="text" class="normal" name="nombre"/>

<input type="button" value="Comprobar" onClick="cambiaClase()";/>

</form>

</body>

Categoria: HTML, CSS, Javascript

Añadir este post a

Del.icio.us -

Meneame -

Digg -

Webeame

3 Comentarios

Entradas relacionadas

Comentario de JaG

Realizado el Martes, 13 de Octubre del 2009 a las 21:10

Gracias bro me sirvio tu ejemplo lo modifique para que el cambio se hisiera a la hora de qe el txt tubiera el focus y a la hora qe lo saltara regresara a su estado. funsiona cuando lo haces para uno pero cuando qieres aplicar lo mismo a diferentes txt es lo tedioso.

Comentario de Jangel0

Realizado el Sábado, 20 de Marzo del 2010 a las 19:56

Grande men.
me sirvio de mucho tu ejemplo, lo utilice en el cambio de color en div al presionar diferentes checkbox, saludos.

Comentario de sebastian

Realizado el Domingo, 20 de Junio del 2010 a las 8:14

Hola amgos yo quiero hacer lo mismo

pero cambiar un color de un div simpemente

pero no se como hacerlo

espero respuesta, gracias.

Escribir un comentario