Table Of Contents
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.
Display All
Display All
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:Source Code
- 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:Source Code
Ihr könnt das auch live ausprobieren unter demo.easy-coding.de/css/add-css-with-javascript/
6,670 times viewed