js document动态加载css

动态加载css文件

 1 /**
 2  * 动态加载CSS
 3  * @param {string} url 样式地址
 4  */
 5 function dynamicLoadCss(url) {
 6     var head = document.getElementsByTagName('head')[0];
 7     var link = document.createElement('link');
 8     link.type = 'text/css';
 9     link.rel = 'stylesheet';
10     link.href = url;
11     head.appendChild(link);
12 }

动态加载cssText

function loadStyleString(cssText) {
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        // firefox、safari、chrome和Opera
        style.appendChild(document.createTextNode(cssText));
    }catch(ex) {
        // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
        style.styleSheet.cssText = cssText;
    }
    document.getElementsByTagName("head")[0].appendChild(style);
}

js导入css样式文件

1 import TextStyle from './TextStyle/TextStyle.css';

这样导入后，TextStyle的内容不是网页css路径，二是css文件的内容