kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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>

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Oliver

    Verfasst am 16. Januar 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.

    • Jonas Hellwig

      Verfasst am 16. Januar 2012 um 13:50 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.