Zum Hauptinhalt springen
Anfrage

HTML Class-Attribut (CSS Klasse) per JavaScript hinzufügen

Von: Jonas

In diesem Beitrag erklären wir wie einen CSS-Klasse mit Vanilla JS hinzugefügt wird.

Aktualisiert von 2015 –

Für viele Aufgaben wird jQuery eingesetzt, obwohl pures JavaScript (Vanilla JS) die Aufgabe genau so gut lösen kann. Ein typisches Beispiel ist das Hinzufügen eines Klassenattributes in HTML. In jQuery wird dafür addClass() geschrieben doch viel länger ist es mit Vanilla JS auch nicht. Und man spart sich ggf. das jQuery-Framework.

CSS-Klasse per JavaScript hinzufügen

Der folgende JavaScipt-Code sucht mittels querySelector nach einer <h1> und fügt die Klasse test hinzu.

var meinevariable = document.querySelector("h1");
meinevariable.className += "test";

Beispiel anschauen

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer von kulturbanause. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.

Falls du es verpasst hast

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung

Unsere Agentur in Berlin unterstützt bei digitalen Projekten mit sehr unterschiedlichem Umfang. Mit Beratung, Gestaltung und Programmierung helfen wir Menschen in verantwortungsbewussten Unternehmen dabei, online zeitgemäß zu kommunizieren.