Hoe voeg ik een klasse toe aan een bepaald element?

Ik heb een element dat al een klasse heeft:

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

Nu wil ik een JavaScript functie maken die een klasse toevoegt aan de div (niet vervangen, maar toevoegen).

Hoe kan ik dat doen?

Edwin Pratt
Bewerkte vraag 9de3 mei 2019 в 10:31
Programmering
javascript dom-manipulation
3de1 februari 2009 в 1:54
19 views
Oplossing

Voeg een spatie plus de naam van je nieuwe klasse toe aan de className eigenschap van het element. Zet eerst een id op het element, zodat je gemakkelijk een verwijzing kunt krijgen.

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

</div>

Dan

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

Let op de spatie voor otherclass. Het is belangrijk om die spatie erin te zetten, anders komen bestaande klassen die ervoor komen in de klassenlijst in gevaar.

Zie ook element.className op MDN.

Sean Ker
Bewerkt antwoord 4de4 oktober 2019 в 9:27
Commentaren (14)

vind je doelelement "d" zoals je wilt en dan:

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

kun je dat op slimmere manieren verpakken om pre-existentie te controleren, en te controleren op ruimtebehoefte etc..

Cœur
Bewerkt antwoord 26ste6 februari 2017 в 4:29
Commentaren (4)

Ervan uitgaande dat je'meer doet dan alleen deze ene klasse toevoegen (bijvoorbeeld, je'hebt ook asynchrone verzoeken en zo aan de hand), zou ik een bibliotheek als Prototype of jQuery aanraden.

Dit zal zowat alles wat je'll moeten doen (inclusief dit) heel eenvoudig maken.

Dus laten we zeggen dat je nu jQuery op je pagina hebt, je zou code als deze kunnen gebruiken om een klassenaam aan een element toe te voegen (bij het laden, in dit geval):

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

Bekijk de jQuery API browser voor andere dingen.

Commentaren (0)