Es gibt im Netz immer mehr Benutzer, die Javascript deaktiviert haben. Um nun HTML-Elemente, die nur mit aktivierten Javascript sinnvoll sind, ausblenden zu können, wäre es sicherlich elegant via CSS auf die entsprechenden HTML-Elemente zugreifen zu können. In diesem Artikel möchte ich euch zeigen, wie ihr via CSS HTML-Elemente bearbeiten könnt, die abhängig vom aktivierten bzw. deaktivierten Javascript/JQuery sind.

Zu aller erst solltet ihr an eurem <body>-Tag ein Attribut ID hinzufügen. Die ID könntet ihr beispielsweise mit „nojs“ bezeichnen.


Sollte also kein Javascript aktiviert sein, könnt ihr in eurer CSS-Datei über die ID „#nojs“ Angaben vornehmen, die auch wirklich nur greifen, wenn kein Javascript aktiviert ist. Für den Fall, dass Javascript aktiviert ist, genügt eine einfaches entfernen der ID bzw. sollte die Bezeichnung der ID einfach in „js“ geändert werden. Das JQuery-Snippet dazu sieht folgendermaßen aus:

$(document).ready(function(){
  $("body").attr("id","js");
});

Ist also Javascript aktiviert, ist die ID am <body>-Tag entsprechend geändert und ihr könnt in eurem CSS-File entsprechend reagieren. Das <body>-Tag sieht dann folgendermaßen aus:


In der CSS-Datei kann dann entsprechend der ID unterschiedlich reagiert werden.

#nojs .box {border: 3px solid red;}
#js .box {border: 3px solid green;}