✔ CSS über Javascript einbinden

[rethus]

Hallo,

ich schreibe gerade an einem Javascript >> Glossar-Script, das ohne große Anpassungen in eine HTML-Seite eingefügt werden kann. Dazu soll nur die einbindung des eigentlichen Java-Script nötig sein.

In diesem Glossar-Script wird anhand eines Layers ein Fenster erzeugt, das über CSS formatiert ist.
Ich möchte, das diese CSS-Datei nicht in die HTML-Datei separat eingebunden werden muss, sondern über die Javascript-Datei eingebunden wird.

Kennt jemand eine Möglichkeit, das zu realisieren?

 

[rethus]

Hier habe ich nun einen Ansatz gefunden:

function getCss()
{
	var stylesheed = document.createElement('link');
	stylesheed.href = cssLocation;
	stylesheed.rel = 'stylesheed';
	stylesheed.type = 'text/css';


	document.getElementsByTagName('head')[0].appendChild(stylesheed);
	//document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\""+cssLocation+">");
	return true;
}

Leider scheint er das Stylesheed nicht im Head-Tag zu includieren... zumindest wird es nicht angewendet...

Kann mir jemand einen Tip geben, was ich da falsch mache?

########
Ergänzung:

Interessant ist, dass alert(document.getElementsByTagName('head')[0].childNodes[7].href); die korrekte Pfadangabe des Stylesheeds liefert... Diese habe ich als ./style.css angegeben und erscheint als file:///home/Test/style.css (Linux-Machine)

 

[Quaese]

Hi,

für den IE gibt es zum Einbinden einer externen CSS-Datei die Methode createStyleSheet.

DOM2 sieht hierfür die Methode createCSSStyleSheet vor, die aber von Mozillas noch nicht implementiert
wurde. Aber hier kann ein Workaround über das Erstellen eines style-Elementes helfen.

Folgendes Script funktioniert bei mir unter Win XP in den gängigen Browsern:

• IE ab Version 5.01
• Netscape 7.1
• Mozilla 1.5
• Firefox 1.5
• Opera 7.54, 8.5 und 9.01

var cssLocation = "style.css";
function getCss(){
  // CSS für IEs nachladen
  if(document.createStyleSheet) document.createStyleSheet(cssLocation);
    // CSS für Mozilla, Netscape, Opera nachladen
  else{
    var objStyle = document.createElement("style");
    var objText = document.createTextNode("@import url("+cssLocation+") screen;");
    objStyle.appendChild(objText);
    document.getElementsByTagName("body")[0].appendChild(objStyle);
  }
}

window.onload=getCss;

Vielleicht hilft Dir das weiter.

Ciao
Quaese

 

[rethus]

Danke, du bist der Beste... klappt wunderbar

 

[dabjoern]

Hallo Leute,

das kleine Script ist echt super und klappt wunderbar in Firefox und IE. Leider hatte ich Probleme in Opera kleiner 9.6 und Safari auf Mac. Es liegt daran, dass das Style Sheet (bzw, die Import Anweisung) im Body steht. Das machen die genannten Browser nicht mit. Der Import muss im Head stattfinden:

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

That's it. Nun geht's in allen (mir vorliegenden) Browsern

Grüße, dabjoern