Hallo Ihr,
Ich will mit JS ein externes Stylesheet in den Head einer XHTML-Datei schreiben. Alles kein Problem, wenn ich document.writeln() verwende machen alle Browser mit.
Nun habe ich mir gedacht, das kann man sicher auch alternativ lösen. Warum ich Alternativen suche? Weil Mozillas XML-Parser write() und writeln() nicht kennt bzw. ignoriert. Man könnte zwar jetzt sagen, es sei verschwendete Zeit, deshalb Alternativen zu suchen, da ich eh nicht vorhabe, das Dokument als .xml oder .xhtml abzuspeichern, aber meine Neugier ist nun halt geweckt.
Nun habe ich zwei Alternativen versucht:
1. Alternative:
<script type="text/javascript">
/* <![CDATA[ */
var styleEl = document.createElement('style');
var styleInhalt = document.createTextNode('@import url("styles/adepto.css");');
styleEl.setAttribute('type', 'text/css');
styleEl.appendChild(styleInhalt);
document.getElementsByTagName('head')[0].appendChild(styleEl);
/* ]]> */
</script>
Ich lasse also ein neues Style-Element erstellen und füge dem als Textknoten '@import url("styles/adepto.css");' hinzu. Das Ergebnis im Test ist relativ verheerend. IE 6 spuckt einen Fehler aus ("unerwarter Aufruf oder Zugriff" in der vorletzten Zeile des Scripts), Opera 6 macht gar nichts, Netscape 6.0 und 6.2 ebenso. Die einzigen Browser, in denen es funktioniert, sind Netscape 7, Firefox und Opera 7.
Warum der IE und Netscape 6 sich verweigern ist mir absolut schleierhaft, können müssten sie es doch eigentlich? Oder habe ich was falsch gemacht?
Die 2. Alternative:
<script type="text/javascript">
/* <![CDATA[ */
var styleEl = document.createElement('link');
styleEl.setAttribute('rel', 'stylesheet');
styleEl.setAttribute('type', 'text/css');
styleEl.setAttribute('href', 'styles/adepto.css');
document.getElementsByTagName('head')[0].appendChild(styleEl);
/* ]]> */
</script>
Ich lasse als ein neues Link-Element erstellen und gebe diesem gleich die relevanten Attribute per setAttribute() mit. Hier sieht es schon ganz anders aus als oben. Der IE macht ab Version 4 (in der 4er Version mit document.all angesprochen) problemlos mit, ebenso Netscape ab Version 6.2.
Jetzt bleiben nur noch Netscape 6.0, der seltsamerweise immer noch nicht mitmacht, und Opera 6 übrig, die ich irgendwie aus der Reserve locken will. Aber wie? Ich bin mit meinem Latein am Ende! Habt ihr noch Ideen bzw. andere Alternativen auf Lager?
Ich würde mich über Antworten freuen, auch wenn dieses Problem eher theoretischer Natur ist.
MfG Mülli
Viva Colonia!