JS动态创建css的两种方法

动态创建css样式有两种方式：

1.引入外部css文件 
2.插入css代码片段 
动态插入css外部文件的方法：

function loadStyle(url){var link = document.createElement('link');    link.type = 'text/css';    link.rel = 'stylesheet';    link.href = url;    var head = document.getElementsByTagName('head')[0];    head.appendChild(link);}loadStyle('test.css');
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

动态加载css代码片段

function loadCssCode(code){    var style = document.createElement('style');    style.type = 'text/css';    style.rel = 'stylesheet';    //for Chrome Firefox Opera Safari    style.appendChild(document.createTextNode(code));    //for IE    //style.styleSheet.cssText = code;    var head = document.getElementsByTagName('head')[0];    head.appendChild(style);}loadCssCode('body{background-color:#f00}');
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

IE中标签被视为一个特殊标签，不能访问其子元素，所以要使用stylesheet.cssText，使用try catch语句捕获IE抛出的错误，兼容代码如下：

function loadCssCode(code){var style = document.createElement('style');    style.type = 'text/css';    style.rel = 'stylesheet';    try{        //for Chrome Firefox Opera Safari        style .appendChild(document.createTextNode(code));    }catch(ex){        //for IE        style.styleSheet.cssText = code;    }    var head = document.getElementsByTagName('head')[0];    head.appendChild(style);}loadCssCode('body{background-color:#f00}');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这种方式可以实时向页面添加样式，所以可以立即在页面上得意反应