js document dynamically loading css

Dynamic loading css file

 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 }

 

Dynamic loading cssText

function loadStyleString (the cssText) {
     var style = document.createElement ( "style" ); 
    style.type = "text / CSS" ;
     the try {
         // Firefox, Safari, Chrome and Opera 
        style.appendChild (document.createTextNode (the cssText)) ; 
    } the catch (EX) {
         // IEs early browser is required attribute stylesheet element of style attributes cssText 
        style.styleSheet.cssText = cssText; 
    } 
    document.getElementsByTagName ( "head") [0 ] .appendChild (style) ; 
}

 

js css style file import

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

After such import, TextStyle content than pages css path, the second is the contents of css file