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!!

Tags de búsquedas:

jquery cambiar class,cambiar clase jquery,jquery cambiar clase,cambiar clase con jquery,cambiar class jquery,cambiar clase css jquery,cambiar class con jquery,jquery cambiar css,jquery cambiar clase css,cambiar css con jquery,cambiar css jquery,cambiar clase css con javascript,cambiar clase css con jquery,eliminar una clase con javascript,asignar clase por jquery

Noticias relacionadas »

8 comentarios en Cambiar el nombre de una clase css con javascript y con jquery

  1. Raynaud
    / Responder

    hola, sou novato en jquery podrias explicarlo mejor con manzanas y peras XD

  2. Ronald
    / Responder

    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..

  3. Salvatore
    / Responder

    Muy util gracias

  4. Carlos Dario
    / Responder

    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).

  5. pakos
    / Responder

    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 ..

    • Pedro Ventura
      / Responder

      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.

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

    • pipe
      / Responder

      super bn creeme

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Irene (3 días)
    I used www.zerobounce.net and it is an amazing platform for…
  • Felipe Albornoz (4 días)
    Agradecido. Saludos.
  • Joel (2 semanas)
    Este grupo es buenísimo hay personas de todo el mundo…
  • Citricus (3 semanas)
    Análisis muy buenos y detallados: Crypto Trading Campus https://t.me/cryptotradingcampus
  • Vane (2 meses)
    Hola muy buena información, en lo personal mino con Javascript…
  • Gabriel Roncancio (2 meses)
    Hola Pedro, gracias por compartir. Tu artículo me dió algunas…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
Estatus de mi proyecto: www.mexame.com

El estatus de mi último proyecto web: Mexame. El cual es un sistema de noticias en plan menéame pero para...

Cerrar