Método addClass
El método addClass agrega
la clase CSS especificada a un elemento.
Sintaxis
Una clase CSS:
$(selector).addClass(nombre de la clase CSS);
Múltiples clases CSS (como cadena):
$(selector).addClass('clase1 clase2 clase3 ...');
Múltiples clases CSS (como array):
$(selector).addClass(['clase1', 'clase2', 'clase3', '...']);
Aplicar una función a cada elemento del conjunto:
$(selector).addClass(function(índice en el conjunto, clases CSS actuales del elemento));
Ejemplo
Nuestro párrafo no tiene clases. Agreguémosle
la clase www:
<p id="test">text</p>
$('#test').addClass('www');
El código HTML quedará así:
<p id="test" class="www">text</p>
Ejemplo
Nuestro párrafo ya tiene una clase. Agreguémosle
también la clase www:
<p id="test" class="eee">text</p>
$('#test').addClass('www');
El código HTML quedará así:
<p id="test" class="eee www">text</p>
Ejemplo
Nuestro párrafo ya tiene dos clases. Agreguémosle
también la clase www:
<p id="test" class="eee ggg">text</p>
$('#test').addClass('www');
El código HTML quedará así:
<p id="test" class="eee ggg www">text</p>
Ejemplo
Nuestro párrafo ya tiene una clase. Agreguémosle
dos clases más - www y ggg:
<p id="test" class="eee">text</p>
$('#test').addClass('www ggg');
El código HTML quedará así:
<p id="test" class="eee www ggg">text</p>
Véase también
-
métodos
removeClass,toggleClass,hasClass -
Propiedad JavaScript
classlist,
que permite agregar y eliminar clases CSS de un elemento en JavaScript puro