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 Jonas

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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →