» Cambiar la clase de un elemento con Javascript

Cambiar la clase de un elemento con Javascript

Escrito por J.F. el Monday, 27 de August 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>

Comentarios (3)

Categoria: CSS,HTML,Javascript

Añadir este post a

Del.icio.us -

Meneame -

Digg -

Webeame

3 Comentarios

Entradas relacionadas

Comentario de JaG

Realizado el Tuesday, 13 de October 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 Saturday, 20 de March 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 Sunday, 20 de June 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