S
Über documents.styleSheets hat man ein Javascript-Array mit allen geladenen Stylesheets des Dokuments als styleSheet-Object zur Verfügung stehen, die wiederum ein cssRules-Array besitzen in dem alle Regeln des Stylesheets als cssRule-Object hinterlegt sind:
document.styleSheets
+ document.styleSheets[0]
+ cssRules
+ cssRules[0]
+ cssText
+ selectorText
+ style
+ parentStyleSheet
+ cssRules[1]
+ etc.
+ document.styleSheets[1]
+ etc.
Ein styleSheet-Object besitzt darüberhinaus noch die Methoden insertRule(rule, index) und deleteRule(index). Über insertRule(rule, index) kann man dann z.B. zur Laufzeit des Dokuments neue Regeln hinzufügen, z.B.:
<script type="text/javascript">
//<![CDATA[
var css = document.styleSheets[0];
var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
css.insertRule(rule, css.cssRules.length);
//]]>
</script>
Ein nachträgliches Bearbeiten von vorhandenen CSS-Rules ist offensichtlich nicht mehr möglich, hier muß man die entsprechende Regel zuerst löschen und dann neu setzen, z.B.:
<script type="text/javascript">
//<![CDATA[
var css = document.styleSheets[0];
var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
css.insertRule(rule, css.cssRules.length);
css.deleteRule(css.cssRules.length - 1);
rule = "#mein-absatz:before { content: url(path/to/anotherimage.png); }";
css.insertRule(rule, css.cssRules.length);
//]]>
</script>
Der Zugriff auf die Stylesheets eines Dokuments sind somit quasi unbegrenzt.
Weitere Dokumentation zum Stylesheets-Object gibt es hier.
Quelle: http://dadabase.de/weblog/archives/2004/11/08/css-manipulation-mit-javascript-uber-das-stylesheets-object