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:

  1. xxxxxxxxxx es el id de mi div, tambien puede ser un p, o un span.
  2. 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.
  3. 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!!

8 opiniones en “Cambiar el nombre de una clase css con javascript y con jquery”

  1. Como podria cambiar el color de fondo de un TR
    Bueno ya lose..
    Solo le agrege un id generico.. para que pueden ser cuantos sean..
    La pregunta.. es que cuando lo hece en prueba.. si me funciona.. a la hora. de colocarlo en mi proyecto no me funciona y lo hago bien.. si algien sabe.. porq’ no funciona..

    codigo.

    .negro
    {
    background-color: #ooo;
    height: 40px;
    color: #fff;
    }

    .blanco
    {
    background-color: #E9ECED;
    height: 30px;
    font-family: ubuntubi;
    font-size: 11px;
    color: #353535;
    }

    function cambiar()
    {

    for(var i=0;i<2;i++)
    {
    var ch = document.getElementById("cl" + i.toString());
    if(ch.checked == true)
    {
    document.getElementById(i).className = "negro";
    }
    else
    {
    document.getElementById(i).className = "blanco";
    }
    }
    }

    si funciona…

    Demo..
    Demo..

    Demo..
    Demo..

    Mi pregunta es porque no funcionaria.. cuando lo hice dinamico..
    solo el tamaño cambia.. no el color de fundo..
    estoy usando en mi proyecto updatePanel
    y dentro esta un repiter que genera la tabla..

    porque solo el tamaño cambia.. no lo demas..

    gracias.. espero respuestas..

  2. Me ha sido útil tu información publicada. Gracias por molestarte en ayudarnos con cosas que son aparentemente simples (pero si las desconoces pues puedes encontrarte en un atoradero).

  3. para hacerlo desde java script tienes que referirte al elemento className

    document.getElementById(‘idElement’).className=’nombreDeTuClassCSS’;

    😉
    en Dom cambian el atributo class por className ya que la palabra class esta reservada por JS aunque no tiene uso dentro pero la reservaron para posibles futuras versiones de JS ..

    1. hola Pakos,

      tienes razón también se puede hacer como tu comentas.
      Pero lo que he hecho yo en Javascript si me funcionó, salvo algunos browsers.

      Sin duda lo mejor hacerlo con Jquery.

  4. Pingback: Mar-20-2009 php links | w3feeds

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *