Unterschiedliche Styles mit und ohne Javascript

13 Jan 2010 0 Comments , , Estimated reading time: 1 minute read

Wie ver­sprochen erzähle ich nochein­mal etwas über meine Ideen, die ich beim Relaunch meines Blogs einge­baut habe.

Nach dem OptOut für Google Ana­lyt­ics kom­mt dies­mal ein eher klein­er Trick: manche Ele­mente sol­len anders gestylt wer­den, je nachdem ob Javas­cript ein- oder aus­geschal­tet ist.

Als erstes wird im HTML dem body die Klasse »has­no­javas­cript« zugew­iesen.

1
2
3
<body class="hasnojavascript"> 
... 
</body>

Im näch­sten Sch­ritt wird mit jQuery die Klasse »has­javas­cript« dem body zugew­iesen und die Klasse »has­no­javas­cript« ent­fernt.

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

Mit Hil­fe dieser beiden Klassen können dann im CSS beide Zustände expliz­it ange­sprochen wer­den.

Die beiden Klassen ben­utze ich beis­piels­weise um die Label für For­mu­lar­feld­er bei eingeschal­tetem Javas­cript aus­zublenden.

Your comment

Your Gravatar