CSS nachträglich einfügen
Wolfgang Pürstner
- javascript
0 Cybaer
Ich möchte nachträglich Stylesheets für einen Tooltip den eine Firefox Extension erstellt in eine Seite einfügen. Natürlich kann ich jede Einstellung per XXX.style.color = "red" setzen, aber alles was nicht gesetzt wird, wird von den Seiteneinstellungen übernommen und der Tooltip sieht je nach Seite anders aus. Jetzt hab ich aber gelesen dass wenn die Stylesheets über das Attribut class definiert ist, die Einstellungen von der Seite ignoriert werden und der Tooltip dann immer gleich aussieht. Wenn ich aber den Style mit Javascript nachträglich in die Seite einfüge und dann mit einem Element darauf verweis funktioniert dies aber leider nicht. Hab hier einen Democode zusammengeschrieben um das Problem zu demonstrieren. Wie kann ich nachträglich in eine Seite CSS einfügen die funktionieren?
lg Wolfgang
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<script type="text/javascript">
function insertText() {
// create css
var style = document.createElement("STYLE");
style.setAttribute("type","text/css");
var styleText = document.createTextNode("mystyle { color:red; font-size:48px; }");
style.appendChild(styleText);
// insert css in head
document.getElementsByTagName("head")[0].appendChild(style);
// insert text
var div = document.createElement("DIV");
div.setAttribute("class","mystyle");
var textNode = document.createTextNode("Text with CSS");
div.appendChild(textNode);
document.body.appendChild(div);
}
</script>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<p>
<a onmouseover="insertText();">Insert Text</a>
</p>
</BODY>
</HTML>
Hi,
Wie kann ich nachträglich in eine Seite CSS einfügen die funktionieren?
Coding: CSS-Stylesheets & -Regeln ergänzen (Mini-Doku im Quelltext)
Coding: CSS-Regeln (& Stylesheets) auslesen & ändern
Gruß, Cybaer