Inhaltsverzeichnis
Man kann dynamisch ein Element "style" in den DOM Baum einhängen. Auf diese Art können CSS dynamisch nachgeladen werden.
Bei einigen Browser muss das style.styleSheet Element genutzt werden, bei anderen hängt man einfach einen Textknoten ein.
Alles anzeigen
Alles anzeigen
Ihr könnt das auch live ausprobieren unter demo.easy-coding.de/css/add-css-with-javascript/
Bei einigen Browser muss das style.styleSheet Element genutzt werden, bei anderen hängt man einfach einen Textknoten ein.
Code
Dazu habe ich folgende Funktion eingeführt:Quellcode
- function addCss(rules) {
- var head = document.getElementsByTagName('head')[0],
- style = document.createElement('style'),
- rules = document.createTextNode(rules);
- style.type = 'text/css';
- if(style.styleSheet)
- style.styleSheet.cssText = rules.nodeValue;
- else style.appendChild(rules);
- head.appendChild(style);
- };
Beispiel
Ein Beispielaufruf sieht wie folgt aus:Quellcode
Ihr könnt das auch live ausprobieren unter demo.easy-coding.de/css/add-css-with-javascript/
8.752 mal gelesen