Ich habe ein Element, das bereits eine Klasse hat:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
```
Nun möchte ich eine JavaScript-Funktion erstellen, die dem "div" eine Klasse hinzufügt (nicht ersetzen, sondern hinzufügen).
Wie kann ich das tun?
Fügen Sie ein Leerzeichen und den Namen Ihrer neuen Klasse in die Eigenschaft "Klassenname" des Elements ein. Setzen Sie zunächst eine "id" auf das Element, damit Sie leicht einen Verweis erhalten können.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Dann
var d = document.getElementById("div1");
d.className += " otherclass";
Beachten Sie das Leerzeichen vor otherclass
. Es ist wichtig, das Leerzeichen einzufügen, da sonst bestehende Klassen, die in der Klassenliste davor stehen, beeinträchtigt werden.
Siehe auch element.className auf MDN.
finden Sie Ihr Zielelement "d", wie immer Sie wollen, und dann:
d.className += ' additionalClass'; //note the space
können Sie das auf clevere Art und Weise verpacken, um das Vorhandensein zu prüfen, den Platzbedarf zu prüfen usw..
Angenommen, Sie tun mehr als nur das Hinzufügen dieser einen Klasse (z. B. haben Sie asynchrone Anforderungen und so weiter gehen als gut), würde ich empfehlen, eine Bibliothek wie Prototype oder jQuery.
Dies macht so ziemlich alles, was Sie tun müssen (einschließlich dieser) sehr einfach.
Angenommen, Sie haben jetzt jQuery auf Ihrer Seite, dann könnten Sie einen Code wie den folgenden verwenden, um einem Element einen Klassennamen hinzuzufügen (in diesem Fall beim Laden):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Schauen Sie sich den jQuery-API-Browser für andere Dinge an.