Kā pievienot klasi noteiktam elementam?

Man ir elements, kuram jau ir klase:

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

Tagad es gribu izveidot JavaScript funkciju, kas pievienos div klasi (nevis aizstās, bet pievienos).

Kā es to varu izdarīt?

Edwin Pratt
Rediģēts jautājums 9priekšpusdienari3t maijā 2019 в 10:31
Programmēšana
javascript dom-manipulation
3pēcpusdienari1t februārī 2009 в 1:54
25 skati
Risinājums

Elementa īpašībai className pievienojiet atstarpi un jaunās klases nosaukumu. Vispirms elementam piešķiriet id, lai uz to varētu viegli iegūt atsauci.

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

</div>

Tad

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

Pievērsiet uzmanību atstarpei pirms citādas klases. Ir svarīgi iekļaut atstarpi, jo pretējā gadījumā tiek apdraudētas esošās klases, kas atrodas pirms tās klašu sarakstā.

Skatīt arī element.className MDN.

Sean Ker
Rediģēta atbilde 4priekšpusdienari4t oktobrī 2019 в 9:27
Komentāri (14)

atrast savu mērķa elementu "d" tomēr vēlaties, un pēc tam:

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

jūs varat to ietīt gudrākos veidos, lai pārbaudītu iepriekšēju eksistenci, pārbaudītu, vai ir vajadzīgā vieta utt..

Cœur
Rediģēta atbilde 26pēcpusdienari6t februārī 2017 в 4:29
Komentāri (4)

Pieņemot, ka jūs darāt vairāk nekā tikai pievienojot šo vienu klasi (piemēram, jums ir asinhroni pieprasījumi un tā tālāk), Es ieteiktu tādu bibliotēku kā Prototype vai jQuery.

Tas padarīs gandrīz visu, kas jums būs jādara (ieskaitot šo), ļoti vienkāršu.

Teiksim, ka jūsu lapā jau ir jQuery, jūs varētu izmantot šādu kodu, lai elementam (šajā gadījumā - ielādes brīdī) pievienotu klases nosaukumu:

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

Par citām lietām skatiet jQuery API pārlūku.

Komentāri (0)