addClass-metodi

addClass-metodi lisää määritetyn CSS-luokan elementille.

Syntaksi

Yksi CSS-luokka:

javascript$(valitsin).addClass(CSS-luokan nimi);

Useita CSS-luokkia (merkkijonona):

javascript$(valitsin).addClass('luokka1 luokka2 luokka3 ...');

Useita CSS-luokkia (taulukkona):

javascript$(valitsin).addClass(['luokka1', 'luokka2', 'luokka3', '...']);

Funktion soveltaminen jokaiseen elementtiin joukossa:

javascript$(valitsin).addClass(function(indeksi joukossa, elementin nykyiset CSS-luokat));

Esimerkki

Kappaleellamme ei ole lainkaan luokkia. Lisätään sille luokka www:

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

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

HTML-koodi näyttää tältä:

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

Esimerkki

Kappaleellamme on jo luokka. Lisätään sille myös luokka www:

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

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

HTML-koodi näyttää tältä:

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

Esimerkki

Kappaleellamme on jo kaksi luokkaa. Lisätään sille myös luokka www:

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

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

HTML-koodi näyttää tältä:

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

Esimerkki

Kappaleellamme on jo luokka. Lisätään sille kaksi muuta luokkaa - www ja ggg:

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

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

HTML-koodi näyttää tältä:

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

Katso myös