Zum Hauptinhalt springen
Anfrage

Klasse zum <body> hinzufügen, wenn JavaScript (jQuery) aktiv ist

Von: Raimund, Jonas

Dieser Beitrag zeigt, wie man eine Klasse zum <body> hinzufügt, wenn jQuery aktiv ist.

Aktualisiert von 2012 – 2 Kommentare

Mit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen.

Kopiert das nachfolgende Snippet in den head oder footer eurer Website. Wenn JavaScript aktiv ist, wird dem body die Klasse „js“ zugewiesen.
jQuery wird übrigens über Google eingebunden. Wenn das Framework bei euch bereits aktiv ist, könnt ihr die obere Zeile also weglassen.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').addClass('js');
  });
</script>

Geschrieben von:

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. 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 Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Oliver
    schrieb am 16.01.2012 um 13:37 Uhr:

    Wenn man kein jQuery nutzt, kann man dieses hier benutzen.

    Nur auf js umbenennen (class=“nojs xyz“ => class=“js“)

    document.body.className='js';

    js hinzufügen (class=“nojs xyz“ => class=“nojs xyz js“)

    document.body.className=document.body.className+' js';

    Oder nojs ersetzen (class=“nojs xyz“ => class=“js xyz“)

    document.body.className=document.body.className.replace('nojs', 'js');

    Beim letzten hat man dann ne gute Trennung.

    Antworten
    • Jonas Hellwig
      schrieb am 16.01.2012 um 13:50 Uhr:

      @Oliver: Vielen Dank für diese sinnvolle und interessante Ergänzung!

      Antworten

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.

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.