Método addClass

O método addClass adiciona uma classe CSS especificada a um elemento.

Sintaxe

Uma classe CSS:

javascript$(seletor).addClass(nome da classe CSS);

Várias classes CSS (como string):

javascript$(seletor).addClass('classe1 classe2 classe3 ...');

Várias classes CSS (como array):

javascript$(seletor).addClass(['classe1', 'classe2', 'classe3', '...']);

Aplicando uma função a cada elemento do conjunto:

javascript$(seletor).addClass(function(índice no conjunto, classes CSS atuais do elemento));

Exemplo

Nosso parágrafo não tem nenhuma classe. Vamos adicionar a classe www a ele:

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

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

O código HTML ficará assim:

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

Exemplo

Nosso parágrafo já tem uma classe. Vamos adicionar a classe www a ele também:

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

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

O código HTML ficará assim:

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

Exemplo

Nosso parágrafo já tem duas classes. Vamos adicionar a classe www a ele também:

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

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

O código HTML ficará assim:

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

Exemplo

Nosso parágrafo já tem uma classe. Vamos adicionar mais duas classes a ele - www e ggg:

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

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

O código HTML ficará assim:

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

Veja também