IE8中使用javascript动态加载CSS的解决方法

2019-12-02 16:00:33来源：爱站网阅读 ()

相信做了前端开发的人都对ie开发者意见很大，他们昧着良心去破坏市场，本文是爱站技术频道小编带来的IE8中使用javascript动态加载CSS的解决方法。

最近我们产品需要在浏览器里动态载入一段CSS，以前的代码是直接用的:

复制代码代码如下:

var bubbleCss = document.createElement('style');

bubbleCss.type = 'text/css';

bubbleCss.innerHTML = blc_conf.bubbleStyle;

document.getElementsByTagName('head')[0].appendChild(bubbleCss);

不过这个只有IE9支持，在IE8下会出问题，一直也没注意到这块，直到最近重构后做完整测试的时候才发现。
网上搜到一个技巧，试过，可行，但是有一些问题

复制代码代码如下:

window.bc_bubble_css = blc_conf.bubbleStyle;

document.createStyleSheet("javascript:bc_bubble_css");

这里可以创建由变量bc_bubble_css定义的样式，不过由于HTML5逐渐普及，我们的css里也混入了一些css3 selector，使用这个方法会导致IE8的parser解析到css3 selector的时候抛异常并停止解析后续css，这让css只加载了一半，网上搜到的办法都是用StyleSheet类型的addRule来增加，不过这个需要自己指定css2 selector以及样式，
因此需要从CSS中拆开单个的规则，然后依次调用addRule，例子：

复制代码代码如下:

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) {

??????? }

??? }

}

看了爱站技术频道小编讲解的IE8中使用javascript动态加载CSS的解决方法?大家还有什么想了解呢?赶紧的来关注js.aizhan.com吧！

原文链接:https://js.aizhan.com/develop/JavaScript/10461.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有