js document動態加載css

動態加載css文件

/**
 * 動態加載CSS
 * @param {string} url 樣式地址
 */
function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}

 

動態加載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樣式文件

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

這樣導入后，TextStyle的內容不是網頁css路徑，二是css文件的內容