Pregunta ¿Cómo agrego una clase a un elemento dado?


Tengo un elemento que ya tiene una clase:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Ahora quiero crear una función de Javascript que agregará una clase al div (no reemplazar, sino agregar).

¿Cómo puedo hacer eso?


919
2018-02-03 13:54


origen


Respuestas:


Agregue un espacio más el nombre de su nueva clase al className propiedad del elemento. Primero, pon un id en el elemento para que pueda obtener una referencia fácilmente.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Entonces

var d = document.getElementById("div1");
d.className += " otherclass";

Ver también element.className en MDN.


1640
2018-02-03 13:58



La forma más fácil de hacer esto sin ningún marco es usar element.classList.add método.

var element = document.getElementById("div1");
element.classList.add("otherclass");

Editar: Y si quieres eliminar una clase de un elemento,

element.classList.remove("otherclass");

Prefiero no tener que agregar ningún espacio vacío y el manejo de entradas duplicadas (que se requiere al usar el document.className enfoque). Hay algunos limitaciones del navegador, pero puedes evitarlos usando polyfills.


1036
2017-12-31 12:12



encuentra tu elemento objetivo "d" como quieras y luego:

d.className += ' additionalClass'; //note the space

puedes envolverlo de maneras más inteligentes para verificar la preexistencia y verificar los requisitos de espacio, etc.


171
2018-02-03 14:01



Agregar clase

  • Cruz compatible

    En el siguiente ejemplo, agregamos un classname al <body> elemento. Esto es compatible con IE-8.

    var a = document.body;
    a.classList ? a.classList.add('classname') : a.className += ' classname';
    

    Esto es una abreviatura de lo siguiente ...

    var a = document.body;
    if (a.classList) {
        a.classList.add('wait');
    } else {
        a.className += ' wait';
    }
    

  • Actuación

    Si le preocupa más el rendimiento que la compatibilidad cruzada, puede acortarlo a lo siguiente, que es un 4% más rápido.

    var z = document.body;
    document.body.classList.add('wait');
    

  • Conveniencia

    Alternativamente, puede usar jQuery pero el rendimiento resultante es significativamente más lento. 94% más lento según jsPerf

    $('body').addClass('wait');
    


Eliminando la clase

  • Actuación

    Usar jQuery selectivamente es el mejor método para eliminar una clase si le preocupa el rendimiento

    var a = document.body, c = ' classname';
    $(a).removeClass(c);
    

  • Sin jQuery es un 32% más lento

    var a = document.body, c = ' classname';
    a.className = a.className.replace( c, '' );
    a.className = a.className + c;
    

Referencias

  1. Caso de prueba jsPerf: Agregar una clase
  2. Caso de prueba jsPerf: eliminar una clase

Usando Prototipos

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Usando YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

116
2017-12-22 23:29



Otro enfoque para agregar la clase al elemento usando JavaScript puro

Para agregar clase:

document.getElementById("div1").classList.add("classToBeAdded");

Para eliminar la clase:

document.getElementById("div1").classList.remove("classToBeRemoved");

32
2017-09-23 11:15



Suponiendo que está haciendo algo más que solo agregar esta clase (por ejemplo, tiene solicitudes asíncronas y así sucesivamente), recomendaría una biblioteca como Prototipo o jQuery.

Esto hará que todo lo que necesite hacer (incluido esto) sea muy simple.

Entonces, digamos que ahora tiene jQuery en su página, podría usar un código como este para agregar un nombre de clase a un elemento (en carga, en este caso):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Revisar la navegador jQuery API para otras cosas


20
2018-02-03 14:00



Cuando el trabajo que estoy haciendo no garantiza el uso de una biblioteca, utilizo estas dos funciones:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

20
2018-02-03 14:40



Puede usar el método classList.add O classList.remove para agregar / eliminar una clase de un elemento.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

El código anterior agregará (y NO reemplazará) una clase "anyclass" a nameElem. De manera similar, puede usar el método classList.remove () para eliminar una clase.

nameElem.classList.remove("anyclss")

14
2017-08-10 08:59



Para agregar una clase adicional a un elemento:

Para agregar una clase a un elemento, sin eliminar / afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, de esta manera:

document.getElementById("MyElement").className += " MyClass";

Para cambiar todas las clases para un elemento:

Para reemplazar todas las clases existentes con una o más clases nuevas, establezca el atributo className:

document.getElementById("MyElement").className = "MyClass";

(Puede usar una lista delimitada por espacios para aplicar múltiples clases).


9
2017-08-20 08:38



Solo para explicar lo que otros han dicho, se combinan múltiples clases de CSS en una sola cadena, delimitada por espacios. Por lo tanto, si quisieras codificarlo, simplemente se vería así:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

Desde allí, puede derivar fácilmente el javascript necesario para agregar una nueva clase ... simplemente agregue un espacio seguido de la nueva clase a la propiedad className del elemento. Sabiendo esto, también puede escribir una función para eliminar una clase más tarde si surge la necesidad.


4
2018-02-03 14:18