Método addClass

El método addClass agrega la clase CSS especificada a un elemento.

Sintaxis

Una clase CSS:

javascript$(selector).addClass(nombre de la clase CSS);

Múltiples clases CSS (como cadena):

javascript$(selector).addClass('clase1 clase2 clase3 ...');

Múltiples clases CSS (como array):

javascript$(selector).addClass(['clase1', 'clase2', 'clase3', '...']);

Aplicar una función a cada elemento del conjunto:

javascript$(selector).addClass(function(índice en el conjunto, clases CSS actuales del elemento));

Ejemplo

Nuestro párrafo no tiene clases. Agreguémosle la clase www:

html<p id="test">text</p>

javascript$('#test').addClass('www');

El código HTML quedará así:

html<p id="test" class="www">text</p>

Ejemplo

Nuestro párrafo ya tiene una clase. Agreguémosle también la clase www:

html<p id="test" class="eee">text</p>

javascript$('#test').addClass('www');

El código HTML quedará así:

html<p id="test" class="eee www">text</p>

Ejemplo

Nuestro párrafo ya tiene dos clases. Agreguémosle también la clase www:

html<p id="test" class="eee ggg">text</p>

javascript$('#test').addClass('www');

El código HTML quedará así:

html<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:

html<p id="test" class="eee">text</p>

javascript$('#test').addClass('www ggg');

El código HTML quedará así:

html<p id="test" class="eee www ggg">text</p>

Véase también