首頁 > web前端 > js教程 > IE8中使用javascript動態載入CSS的解決方法_javascript技巧

IE8中使用javascript動態載入CSS的解決方法_javascript技巧

WBOY
發布: 2016-05-16 16:44:13
原創
1461 人瀏覽過

眾所周知做前端開發的都恨不得踹IE開發者幾腳,IE開發者名聲之差不低於GFW開發者,昧著良心搞壞市場,人人得而誅之,但是在中國這些地方市場佔有率擺在那裡,沒辦法只能向現實低頭。

最近我們產品需要在瀏覽器裡動態載入一段CSS,以前的程式碼是直接用的:

複製程式碼 程式碼如下:

var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleSty_conf. 🎜>document.getElementsByTagName('head')[0].appendChild(bubbleCss);
不過這個只有IE9支持,在IE8下會出問題,一直也沒注意到這塊,直到最近重構後做完整測試的時候才發現。
網路搜尋一個技巧,試過,可行,但有些問題

複製程式碼 程式碼如下:
window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");
這裡可以創建變量由變數來定義的結果,我們的css裡也混入了一些css3 selector,使用這個方法會導致IE8的parser解析到css3 selector的時候拋異常並停止解析後續css,這讓css只加載了一半,網上搜到的辦法都是用StyleSheet類型的addRule來增加,不過這個需要自己指定css2 selector以及樣式,
因此需要從CSS中拆開單一的規則,然後依序呼叫addRule,例子:


複製程式碼 程式碼如下:
var s = document.createStyleSheet();
var rules = blc_conf.placebbbleStyle.place( ^*]**//g, "").replace(/@[^{]*{/g, '').match(/[^{}] {[^}] }/g);
for(var i = 0; i     var m = rules[i].match(/(.*)s*{s*(.*)}/);
    if(m) {
        try {
            s.addRule(m[1], m[2]));    }
}

開頭有兩個替換,分別去掉注視和部分css3 的selector,不過依然有漏網的selector,需要在後面try catch 捉一下。

另外再次鄙視設計IE介面的人
相關標籤:
ie8
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板