Unterschiedliche Styles mit und ohne Javascript

Wie versprochen erzähle ich nocheinmal etwas über meine Ideen, die ich beim Relaunch meines Blogs eingebaut habe.

Nach dem OptOut für Google Analytics kommt diesmal ein eher kleiner Trick: manche Elemente sollen anders gestylt werden, je nachdem ob Javascript ein- oder ausgeschaltet ist.

Als erstes wird im HTML dem body die Klasse »hasnojavascript« zugewiesen.

1
2
3

<body class="hasnojavascript"> 
... 
</body>

Im nächsten Schritt wird mit jQuery die Klasse »hasjavascript« dem body zugewiesen und die Klasse »hasnojavascript« entfernt.

$(document).ready(function(){
    // Indicate Javascript for CSS
    $("body").addClass('hasjavascript');
    $("body").removeClass('hasnojavascript');
});

Mit Hilfe dieser beiden Klassen können dann im CSS beide Zustände explizit angesprochen werden.

Die beiden Klassen benutze ich beispielsweise um die Label für Formularfelder bei eingeschaltetem Javascript auszublenden.

Your comment