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:
-
<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.
-
<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:
Categoria: HTML, CSS, Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
