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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IE8中使用javascript动态加载CSS的解决方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1500字，纯文字阅读大概需要3分钟。

内容图文

众所周知做前端开发的都恨不得踹IE开发者几脚，IE开发者名声之差不低于GFW开发者，昧着良心搞坏市场，人人得而诛之，但是在中国这些地方市场占有率摆在那里，没办法只能向现实低头。

最近我们产品需要在浏览器里动态载入一段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) {
        }
    }
}
开头有两个替换，分别去掉注视和部分css3 的selector，不过依然有漏网的selector，需要在后面try catch 捉一下。

另外再次鄙视设计IE接口的人

内容总结

以上是互联网集市为您收集整理的IE8中使用javascript动态加载CSS的解决方法全部内容，希望文章能够帮你解决IE8中使用javascript动态加载CSS的解决方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端