Miten lisään luokan tietylle elementille?

Minulla on elementti, jolla on jo luokka:

<div class="someclass">
    <img ... id="kuva1" name="kuva1" />
</div>

Nyt haluan luoda JavaScript-funktion, joka lisää luokan div:iin (ei korvaa, vaan lisää).

Miten voin tehdä sen?

Edwin Pratt
Muokattu kysymysT33 toukokuu 2019 в 10:31
Ohjelmointi
javascript dom-manipulation
T11 helmikuu 2009 в 1:54
35 näkymät
Ratkaisu

Lisää elementin className-ominaisuuteen välilyönti ja uuden luokan nimi. Laita ensin elementtiin id, jotta voit helposti saada viittauksen.

<div id="div1" class="someclass">

</div>

Sitten

var d = document.getElementById("div1");
d.className += " otherclass";

Huomaa välilyönti ennen otherclass. On tärkeää, että välilyönti on mukana, muuten se vaarantaa olemassa olevat luokat, jotka tulevat ennen sitä luokkaluettelossa.

Katso myös element.className MDN:ssä.

Sean Ker
Muokattu vastausta T44 lokakuu 2019 в 9:27
Kommentit (14)

Etsi kohde-elementti "d" miten haluat ja sitten:

d.className += ' additionalClass'; //note the space

voit kietoa sen nokkelampiin tapoihin, joilla voit tarkistaa olemassaolon, tilantarpeen jne...

Cœur
Muokattu vastausta T66 helmikuu 2017 в 4:29
Kommentit (4)

Olettaen, että teet enemmän kuin vain tämän yhden luokan lisäämisen (esim. sinulla on asynkronisia pyyntöjä ja niin edelleen), suosittelen kirjastoa kuten Prototype tai jQuery.

Tämä tekee lähes kaikesta, mitä sinun tarvitsee tehdä (tämä mukaan lukien), hyvin yksinkertaista.

Joten sanotaan, että sinulla on jQuery sivulla nyt, voit käyttää tällaista koodia lisätäksesi luokan nimen elementtiin (tässä tapauksessa latauksen yhteydessä):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Tutustu jQuery API -selaimeen muita asioita varten.

Kommentit (0)