IE8中使用javascript動(dòng)態(tài)加載CSS的解決方法

2024-05-06 15:45:58

字體：大中小

供稿：網(wǎng)友

相信做了前端開發(fā)的人都對(duì)ie開發(fā)者意見很大，他們昧著良心去破壞市場(chǎng)，本文是錯(cuò)新技術(shù)頻道小編帶來(lái)的IE8中使用javascript動(dòng)態(tài)加載CSS的解決方法。

最近我們產(chǎn)品需要在瀏覽器里動(dòng)態(tài)載入一段CSS，以前的代碼是直接用的:

復(fù)制代碼代碼如下:

var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleStyle;
document.getElementsByTagName('head')[0].appendChild(bubbleCss);

不過(guò)這個(gè)只有IE9支持，在IE8下會(huì)出問(wèn)題，一直也沒(méi)注意到這塊，直到最近重構(gòu)后做完整測(cè)試的時(shí)候才發(fā)現(xiàn)。
網(wǎng)上搜到一個(gè)技巧，試過(guò)，可行，但是有一些問(wèn)題

復(fù)制代碼代碼如下:

window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");

這里可以創(chuàng)建由變量bc_bubble_css定義的樣式，不過(guò)由于HTML5逐漸普及，我們的css里也混入了一些css3 selector，使用這個(gè)方法會(huì)導(dǎo)致IE8的parser解析到css3 selector的時(shí)候拋異常并停止解析后續(xù)css，這讓css只加載了一半，網(wǎng)上搜到的辦法都是用StyleSheet類型的addRule來(lái)增加，不過(guò)這個(gè)需要自己指定css2 selector以及樣式，
因此需要從CSS中拆開單個(gè)的規(guī)則，然后依次調(diào)用addRule，例子：

復(fù)制代碼代碼如下:

var s = document.createStyleSheet();
var rules = blc_conf.bubbleStyle.replace(////*[^/*]*/*///g, "").replace(/@[^{]*/{/g, '').match(/[^/{/}]+/{[^/}]+/}/g);
for(var i = 0; i < rules.length; i++) {
??? var m = rules[i].match(/(.*)/s*/{/s*(.*)/}/);
??? if(m) {
??????? try {
??????????? s.addRule(m[1], m[2]);
??????? } catch(e) {
??????? }
??? }
}

看了錯(cuò)新技術(shù)頻道小編講解的IE8中使用javascript動(dòng)態(tài)加載CSS的解決方法?大家還有什么想了解呢?趕緊的來(lái)關(guān)注js.VeVb.com吧！

上一篇：分享nodejs分頁(yè)類代碼

下一篇：火狐下input焦點(diǎn)無(wú)法重復(fù)獲取問(wèn)題的解決方法