脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → IE8动态加载CSS的解决方法

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

 更新时间：2014年06月17日 09:27:41   投稿：junjie  
这篇文章主要介绍了IE8中使用javascript动态加载CSS的解决方法,此方法也不是很完美,需要的朋友参考下吧

众所周知做前端开发的都恨不得踹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接口的人

您可能感兴趣的文章:

相关文章

  • js实现简单div拖拽功能实例

    js实现简单div拖拽功能实例

    这篇文章主要介绍了js实现简单div拖拽功能的方法,实例分析了javascript针对div层拖拽的实现技巧,需要的朋友可以参考下
    2015-05-05
  • js 窗口抖动示例

    js 窗口抖动示例

    想必大家对窗口抖动一词并不陌生吧，其实原理很简单，下面为大家简单介绍下js中时如何实现的，喜欢的朋友可以参考下
    2013-09-09
  • 基于dataset的使用和图片延时加载的实现方法

    基于dataset的使用和图片延时加载的实现方法

    下面小编就为大家分享一篇基于dataset的使用和图片延时加载的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行
    2016-05-05
  • BootStrap daterangepicker 双日历控件

    BootStrap daterangepicker 双日历控件

    这篇文章主要介绍了BootStrap daterangepicker 双日历控件,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06
  • javascript模拟git diff命令实现文本文件差异比较

    javascript模拟git diff命令实现文本文件差异比较

    这篇文章主要为大家详细介绍了javascript如何模拟git diff命令实现文本文件差异比较效果,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
    2023-12-12
  • JS获取字符串实际长度(包含汉字)的简单方法

    JS获取字符串实际长度(包含汉字)的简单方法

    下面小编就为大家带来一篇JS获取字符串实际长度(包含汉字)的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 盘点7个简单但棘手的JavaScript面试问题分析

    盘点7个简单但棘手的JavaScript面试问题分析

    这篇文章主要为大家介绍了盘点7个简单但棘手的JavaScript面试问题分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • layui使用数据表格实现购物车功能

    layui使用数据表格实现购物车功能

    这篇文章主要为大家详细介绍了layui使用数据表格实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript中定义类的方式详解

    JavaScript中定义类的方式详解

    这篇文章主要介绍了JavaScript中定义类的方式,结合实例形式分析了JavaScript实现面向对象类的定义及使用相关技巧,并附带了四种JavaScript类的定义方式,需要的朋友可以参考下
    2016-01-01

最新评论