CSS im Header per JS ändern bis Seite geladen.

B

BMo

Mitglied
Hallo,
ich hab ein großes Problem und möchte wissen, ob einer weiß, ob man folgendes machen kann:

Meine Seite hat ein div, dass normal, falls JS im Browser NICHT AKTIV ist, angezeigt werden soll.
Falls JS aktiviert ist, sollte bereits im Header CSS ergänzt werden, so das das div per display:none nicht sichtbar ist, sobald die Seite geladen ist.
Das Problem ist, das ich natürlich das div nicht über getElementbyID ansprechen kann, da es noch nicht geladen ist, wenn ich den head lade.

Das div erst bei body onload auszublenden wäre einfach, aber das möchte ich nicht, da der user es sonst kurz sehen könnte.

Gibt es hierfür eine Lösung?

Viele Grüße BMo
 
du könntest dir was in der art bauen

Javascript: 
tuwas = setInterval("tuwas",delay);

function tuwas() {
    if(document.getElementById("...") != nüx) { //unter Umständen eher mit try/catch - müsstest probieren
     //einblenden   
    }
}

wär mal eine schnelle überlegung, vl gibts bessere Wege :D

lg

//edit
Ich mus zugeben, Sven's Lösung ist eindeutig genialer als meine :) - da wär ich nie drauf gekommen ^^
 
Zuletzt bearbeitet:
Moin,

sofern der Einsatz von <noscript> nicht möglich ist, verwende ich gern eine andere Variante.

Das <div> und auch sonstige sichtbare Seitenelemente sind ja im <head> noch nicht bekannt.
Was aber schon bekannt ist, ist das <html>-Element.

Ich gebe dem <html> per JS einen Klassennamen, schon habe ich einen Ansatz für einen CSS-Selektor, der auf aktiviertes(oder auch nicht)JS reagieren kann :)

Probiers mal aus:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-02-22" />
<title>Test</title>
<script type="text/javascript">
<!--
document.getElementsByTagName('html')[0].className='scripted';
//-->
</script>
<style type="text/css">
<!--
.showIfScripted,.scripted .hideIfScripted{
  display:none;
}
.scripted .showIfScripted{
  display:block;
}
-->
</style>
</head>
<body>
  <div class="showIfScripted">JS ist an</div>
  <div class="hideIfScripted">JS ist aus</div>
</body>
</html>
 
Vielen Dank!
Sehr interessante Lösungen!
Ich hab noch einiges versucht mit per JS ein CSS einbinden so à la:

var stylesheet = document.createElement('link');
stylesheet.href = 'url/jsStyle.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';

document.getElementsByTagName("head")[0].appendChild(stylesheet);

aber irgendwie wird das wohl nicht mit geparst.

Hat jemand noch eine Lösung?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück