javascript/js 原生动态引入外部css文件及动态插入css代码片段

转:http://blog.csdn.net/qq_29944285/article/details/76515981

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

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

1
2
3
4
5
6
7
8
9
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');

动态加载css代码片段

1
2
3
4
5
6
7
8
9
10
11
12
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}');

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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}');

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

ˆ Back To Top