¿Cómo añadir y quitar clases CSS a los elementos HTML?

Para los expertos en desarrollo web, añadir, modificar o eliminar clases css a elementos HTML es una obviedad, los que ya sepan cómo hacerlo pueden enviarnos comentarios para enriquecer este post.


Si quieres añadir y quitar clases CSS a los elementos HTML, lo puedes hacer con jQuery de una forma muy sencilla, por ejemplo tenemos una clase my-new-class que es la que queremos agregar y quitar a un <div>.

También podemos usar código estándar de JavaScript para agregar / quitar clases HTML.

 

Ejemplo con jQuery

// ## agregar clase
$('div').addClass('my-new-class'); 


// ## eliminar clase
$('div').removeClass('my-new-class');

Ejemplo JavaScript

// agregar clase
document.getElementById('elem').className = 'my-new-class';


// eliminar clase
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )

El código estándar de JavaScript es más largo que usar jQuery como se puede ver en los ejemplos de arriba. Pero si no quiere depender de un marco, siempre se puede utilizar una nueva API de JavaScript llamada classList.

Uso API classList

Similar a jQuery, classList proporciona un conjunto de métodos que nos permiten modificar clases HTML.

En un caso en el que hay un div con múltiples clases, podemos recuperar las clases que se asignan en el div usando classList.

var classes = document.getElementByID('elem').classList;

Cuando abrimos el navegador y vemos en herramientas de desarrollo la consola, podemos ver la lista de las clases

learn css

Para agregar y quitar clase, podemos utilizar .add() y .remove() .

var elem = document.getElementByID('elem');

// agregar clase
elem.classList.add('my-new-class'); 

//eliminar clase
elem.classList.remove('my-new-class');

Podemos agregar múltiples clases, esto se puede hacer mediante la separación de cada clase con una coma:

elem.classList.add('my-new-class', 'my-other-class');  

Para comprobar si ciertos elementos contienen la clase especificada, podemos utilizar .contains() . Devolverá true si la clase especificada está presente, y devolver false si no lo hace.

 

elem.classList.contains('class-name'); 

También podemos modificar la clase utilizando .toggle() . El siguiente fragmento de código muestra cómo ligamos el método .toggle() con un evento de clic del ratón.

var button = document.getElementById('button');  
function toggle() {  
    elem.classList.toggle('bg');  
}  
button.addEventListener('click', toggle, false); 

Por ultimo comentarte que classList es una nueva API nativa de JavaScript que también se introdujo junto con HTML5. Es limpia y simple, y trabaja en los siguientes navegadores: Firefox 3.6, Opera 11.5 y Chrome 8 y Safari 5.1. Sin embargo Internet Explorer 9 no tiene soporte para esta API, pero como siempre hay una solución, podemos utilizar el polyfills para implementar la API classList en Internet Explorer.

Artículos relacionados
10 Comentarios
  • isamnoaf Comentar
    Thursday, June 23, 2016

    1332165

  • Hopson Comentar
    Friday, March 23, 2018

    I used to be able to find good info from your articles.

  • Price Comentar
    Thursday, March 29, 2018

    I like the valuable information you provide in your articles. I'll bookmark your weblog and check again here frequently. I'm quite sure I'll learn many new stuff right here! Best of luck for the next!

  • Matthews Comentar
    Tuesday, April 17, 2018

    Wow, fantastic blog structure! How long have you ever been blogging for? you make blogging glance easy. The entire glance of your site is excellent, let alone the content material!

  • Blackman Comentar
    Tuesday, April 24, 2018

    My partner and I stumbled over here different page and thought I may as well check things out. I like what I see so now i am following you. Look forward to looking over your web page again.

  • Dortch Comentar
    Saturday, April 28, 2018

    ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

  • Knoll Comentar
    Wednesday, May 2, 2018

    Maravilhosa ! ?em algum dicas par? aspirantes a escritores? ?u sou esperando ?ara inic?ar meu próprio site em breve ma? estou ?m pouco perdido em tudo. Você sugerir ?omeçando c?m uma plataforma livre como ? Wordpress ?u ?r pa?? uma opção paga? Há tantos escolhas lá f?ra que eu sou totalmente oprimido... ?ualquer ideias ? Saúd? !

  • Flora Comentar
    Saturday, May 5, 2018

    I've learn some good stuff here. Definitely price bookmarking for revisiting. I wonder how a lot effort you set to create this sort of great informative site.

  • Conyers Comentar
    Friday, May 25, 2018

    Wow, incredible weblog structure! How long have you been blogging for? you made running a blog glance easy. The whole glance of your web site is excellent, as neatly as the content!

  • Collingridge de Tourcey Comentar
    Friday, May 25, 2018

    I have been surfing online more than 2 hours today, yet I never found any interesting article like yours. It's pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.

Enviame un comentario