nicht angemeldet
Hallo,
Deine Methode ist im Grunde die einfachste, aber ich erläutere erst mal, was sonst noch möglich wäre:
Man kann so vorgehen, dass man per JavaScript eine neue Style-Regel in ein vorhandenes Screen-Stylesheet einfügt. Über document.styleSheets hat man JavaScript-Zugriff auf die Stylesheets eines Dokuments. Darüber kann man eine neue Style-Regel einfügen (z.B. #textbox { width:100px; }).
Der Standard dazu ist DOM 2 Style, der allerdings meines Wissens nur von Gecko und Konqueror hinreichend umgesetzt wird. Opera kann dies gar nicht, MSIE kann es immerhin über einen kleinen Umweg. Ein Beispiel:
<style type="text/css" media="screen"></style>
<script type="text/javascript">
[code lang=javascript]function addScreenRule (selector, declarations) {
// Kennt der Browser document.styleSheets und existiert bereits eines?
if (!document.styleSheets || document.styleSheets.length == 0) {
return false;
}
// Speichere das Stylesheet-Objekt zwischen
var stylesheet = document.styleSheets[0];
alert("use styleSheets[0]");
// insertRule ist der standardisierte Weg (Gecko, Konqueror)
if (stylesheet.insertRule) {
new_rule_number = stylesheet.insertRule(selector + " { " + declarations + " }",
stylesheet.cssRules.length);
// Nur eine Überprüfung, ob die eingefügte Regel auch wieder über JavaScript ausgelesen werden kann
if (stylesheet.cssRules[new_rule_number].cssText.length > 0) {
alert("added with stylesheet.insertRule");
return true;
}
} else if (stylesheet.addRule) {
// MSIE kennt addRule statt insertRule
stylesheet.addRule(selector, declarations);
alert("added with stylesheet.addRule");
return true;
}
// keine Methode war erfolgreich
return false;
}
window.onload = function () {
// Beim abgeschlossenen Laden der Seite aufrufen:
var result = addScreenRule("#p", "font-weight:bold;");
if (!result) {
alert("Fehler beim Setzen");
}
};
</script>
<p id="p">bla</p>[/code]
Es existiert also ein Screen-Stylesheet, das erste im Dokument (document.styleSheets[0]). Dies kann auch ein leeres style-Element sein, Hauptsache, es ist ausdrücklich für media="screen". Die Funktion addScreenRule() bekommt als Parameter den Selektor (z.B. #p) und die Deklarationen (eigenschaft:wert; eigenschaft:wert; ...). Über insertRule() bzw. addRule() werden dem Screen-Stylesheet dann die neue Regel hinzugefügt.
Da dies wie gesagt z.B. nicht im Opera funktioniert, muss man die Funktion sowieso um eine weitere Alternativmethode erweitern, die hast du schon angesprochen:
Die einzige Lösung, die mir einfiel, was es, in zwischen "<HEAD>" und "</HEAD>" CSS-Code ("<style> ... </style>") mittels Javascript einzufügen, aber wie das geht, weiß ich leider auch nicht...
Elemente erzeugst du einfach per document.createElement(). Attribute (z.B. type und media) setzt du direkt als Objekteigenschaften an diesem erzeugten Element. Den Inhalt des style-Elements erzeugst du mit document.createTextNode(). Den Textknoten hängst du an den Elementknoten und den Elementknoten schließlich an das head-Element im Dokument. Schematisch:
function addScreenRule (rule) {
// Element erzeugen
var style_element = document.createElement("style");
// Attribute setzen
style_element.media = "screen";
style_element.type = "text/css";
// Textknoten erzeugen mit dem übergebenen String
var textknoten = document.createTextNode(rule);
// Hänge Textknoten an das Style-Element
style_element.appendChild(textknoten);
// Hänge Style-Element an den Head
document.getElementsByTagName("head")[0].appendChild(style_element);
}
var breite = myWidth - 300;
addScreenRule("#textbox { width:" + breite + "px; }");
Mein Beispielscript im Thread style-Element erzeugen per Script vereinigt alle Methoden. Dieses Script hängt entweder neue Regeln an ein vorhandenes Stylesheet an (mit der oben beschriebenen Methode). Wenn keines vorhanden ist, dann wird eines erzeugt, entweder über DOM 2 Style oder, wenn der Browser dies nicht unterstützt, auf die einfache Methode mit dem Erzeugen und Einfügen eines style-Elements. (Dort bin ich aber nicht auf Formatierungen für einen Medientyp eingegangen.)
Das nur zur Information – wenn du es dir nicht kompliziert machen willst, dann reicht wie gesagt die Methode aus, auf die du schon selbst gekommen warst. Die funktioniert nämlich in den meisten Browsern ohne Umwege und hat auch keine besonderen Nachteile.
Mathias