Cambiar el nombre de una clase css con javascript y con jquery
Hoy he aprendido una cosita bastante sencilla pero muy util con jquery.
Estaba haciendo un pequeño desarrollo con PHP y AJAX para que un usuario pudiese seleccionar su nick en un simple input text. El tema es que cuando el nick estuviese ocupado me tendría que mostrar un mensaje en un div y cambiar el class para que se mostrase una clase css determinada.
Esto yo sabía como hacerlo en javascript, pero resulta que en IE 6 peta, como siempre!!!
Para lo que no lo sepan se haría con la siguiente sentencia:
document.getElementById("xxxxxxxxxx").setAttribute("class", "error");
donde:
- xxxxxxxxxx es el id de mi div, tambien puede ser un p, o un span.
- class, es el atributo que queremos cambiar de la etiqueta html que estamos usando, en mi caso es el div, pero repito, puede ser un p o un span.
- error es el nombre de la clase css que he definido en mi hoja de estilos, que tiene un background y una imagen de fondo que muestra el look & feel de un mensajito de error.
Pero bueno lo que he aprendido es a hacerlo con jquery, lo cual es una pasada porque en sólo una linea puedes añadir, modificar o eliminar el nombre de la clase css.
La sentencia es la siguiente:
- Para añadir una clase css a un elemento HTML ```$('#xxxxxxxxxx ').addClass('error');```
- Para eliminarlo ```$('#xxxxxxxxxx ').removeClass('error');```
KEEP IT SIMPLE!!