addClass-metodi
addClass-metodi lisää
määritetyn CSS-luokan elementille.
Syntaksi
Yksi CSS-luokka:
$(valitsin).addClass(CSS-luokan nimi);
Useita CSS-luokkia (merkkijonona):
$(valitsin).addClass('luokka1 luokka2 luokka3 ...');
Useita CSS-luokkia (taulukkona):
$(valitsin).addClass(['luokka1', 'luokka2', 'luokka3', '...']);
Funktion soveltaminen jokaiseen elementtiin joukossa:
$(valitsin).addClass(function(indeksi joukossa, elementin nykyiset CSS-luokat));
Esimerkki
Kappaleellamme ei ole lainkaan luokkia. Lisätään
sille luokka www:
<p id="test">teksti</p>
$('#test').addClass('www');
HTML-koodi näyttää tältä:
<p id="test" class="www">teksti</p>
Esimerkki
Kappaleellamme on jo luokka. Lisätään
sille myös luokka www:
<p id="test" class="eee">teksti</p>
$('#test').addClass('www');
HTML-koodi näyttää tältä:
<p id="test" class="eee www">teksti</p>
Esimerkki
Kappaleellamme on jo kaksi luokkaa. Lisätään
sille myös luokka www:
<p id="test" class="eee ggg">teksti</p>
$('#test').addClass('www');
HTML-koodi näyttää tältä:
<p id="test" class="eee ggg www">teksti</p>
Esimerkki
Kappaleellamme on jo luokka. Lisätään
sille kaksi muuta luokkaa - www ja ggg:
<p id="test" class="eee">teksti</p>
$('#test').addClass('www ggg');
HTML-koodi näyttää tältä:
<p id="test" class="eee www ggg">teksti</p>
Katso myös
-
metodit
removeClass,toggleClass,hasClass -
JavaScript-ominaisuus
classlist,
jolla voit lisätä ja poistaa elementin CSS- luokkia puhtaalla JavaScriptillä
