Externes Stylesheet laden NUR wenn JS aktiv

[N.Wenzel]

Hi,

ich würde gern ein Stylesheet laden, NUR wenn Javascript aktiviert ist.

Der Idee war eigentlich ziemlich einfach:

document.write('<link rel="stylesheet" href="jsEnabled.css" type="text/css" media="all" />');

Die Frage ist nur, wie ich das valid bekomm. Entweder erkennt mir der Parser ein unerlaubtes <link> Element, oder das Link Element wird in einen Kommentar/CDATA Bereich geschrieben und das <link> Element wird ignoriert.

Gibt es eine valide Möglichkeit so ein CSS File nachzuladen, oder muss ich entweder das ganze File in einen per document.write geschriebenen <style> Bereich verlagern, oder den einzelnen Elementen mit JS die entsprechenden Styles hinzufügen?

danke,
N.Wenzel

[Struppi]

document.write('<link rel="stylesheet" href="jsEnabled.css" type="text/css" media="all" />');

Die Frage ist nur, wie ich das valid bekomm. Entweder erkennt mir der Parser ein unerlaubtes <link> Element, oder das Link Element wird in einen Kommentar/CDATA Bereich geschrieben und das <link> Element wird ignoriert.

Wieso sollte das nicht valide sein?

Struppi.

[N.Wenzel]

document.write('<link rel="stylesheet" href="jsEnabled.css" type="text/css" media="all" />');

Die Frage ist nur, wie ich das valid bekomm.

Wieso sollte das nicht valide sein?

Unescaped Javascript in an XHTML Document. Das hab ich vergesen zu erwähnen, das ganze is XHTML net HTML.

[N.Wenzel]

Okeh, wenn man's richtig macht, dann gehts:

<script type="text/javascript">

  
  //<![CDATA[  
  document.write('<link rel="stylesheet" href="jsEnabled.css" type="text/css" media="all" />');  
  //]]>

</script>

[Gunnar Bittersmann]

Hello out there!

oder das Link Element wird in einen Kommentar/CDATA Bereich geschrieben und das <link> Element wird ignoriert.

Kommentar??

Nicht das "<link …>" gehört in den CDATA-Bereich, sondern das ganze Script:

[code lang=html]<script type="text/javascript">
//<![CDATA[
document.write('<link rel="stylesheet" href="jsEnabled.css" type="text/css" media="all" />');
//]]>
</script>[/code]

Allerdings ist document.write() alles andere als state of the art. Mit DOM:

[code lang=html]<script type="text/javascript">
//<![CDATA[

window.onload = function ()  
{  
  var head = document.getElementsByTagName("head")[0];  
  
  var link = document.createElement("link");  
  link.rel = "stylesheet";  
  link.href = "jsEnabled.css";  
  link.type = "text/css";  
  link.media = "all";  
  
  head.appendChild(link);  
};

//]]>
</script>[/code]

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Im IE geht’s BTW denkbar einfach:

document.createStyleSheet('jsEnabled.css');

Mir ist noch nichts eingefallen, wie für andere Browser eine '@import'-Regel an den Anfang eines Stylesheets zu schreiben oder gar ein neues zu erzeugen wäre.

See ya up the road,
Gunnar

[asdf]

Hey

Mir ist noch nichts eingefallen, wie für andere Browser eine '@import'-Regel an den Anfang eines Stylesheets zu schreiben oder gar ein neues zu erzeugen wäre.

wie meinen? (ich interpretiere es als: einfach ein style element erzeugen? oder mit document.styleSheets[\d+].insertRule('@import ...', ...) einfach eine import regel reinhängen?)

Tschö

[Gunnar Bittersmann]

Hello out there!

Mir ist noch nichts eingefallen, wie für andere Browser eine '@import'-Regel an den Anfang eines Stylesheets zu schreiben oder gar ein neues zu erzeugen wäre.

wie meinen? (ich interpretiere es als: einfach ein style element erzeugen? oder mit document.styleSheets[\d+].insertRule('@import ...', ...) einfach eine import regel reinhängen?)

Letzteres meinte ich. Keine Ahnung, warum das in meiner Bastelstube nicht funzen[tm] wollte.

window.onload = function ()  
{  
  if (document.createStyleSheet)  
    document.createStyleSheet('test.css');  
  else if (document.styleSheets[0] && document.styleSheets[0].insertRule)  
    document.styleSheets[0].insertRule("@import url(foo.css);", 0);  
};

Das setzt aber im else-Zweig das Vorhandensein eines Stylesheets voraus (sei es per 'link rel="stylesheet"' oder 'style'. (Regeln müssen in diesem nicht vorhanden sein.)

Was ist, wenn keins da ist? Wie erzeugt man ein neues Stylesheet?

See ya up the road,
Gunnar

[asdf]

Hey

Was ist, wenn keins da ist? Wie erzeugt man ein neues Stylesheet?

äh, ich würde jetzt auf teufel komm raus einfach ein style element erzeugen?

  
if (document.styleSheets && !document.styleSheets[0])  
  document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));  
if (document.styleSheets[0] && document.styleSheets[0].insertRule)  
  document.styleSheets[0].insertRule("body {color:red}", 0);  

Tschö

[Gunnar Bittersmann]

Hello out there!

Was ist, wenn keins da ist? Wie erzeugt man ein neues Stylesheet?
äh, ich würde jetzt auf teufel komm raus einfach ein style element erzeugen?

Wer hätte das gedacht? ;-)

Ich dachte, es könnte sowas geben wie var stylesheet = new StyleSheet();

See ya up the road,
Gunnar

[asdf]

Hey

Ich dachte, es könnte sowas geben wie var stylesheet = new StyleSheet();

gibt es sowas wie new Div() oder new Table() (hahaaaa, keine ahnung, ich weiss ehrlich gesagt nicht, ob es ein new StyleSheet() gibt oder nicht)?

Tschö

[Cybaer]

Hi,

Was ist, wenn keins da ist? Wie erzeugt man ein neues Stylesheet?

Coding: CSS-Stylesheets & -Regeln ergänzen

Gruß, Cybaer