IE8中使用javascript动态加载CSS的解决方法
来源:爱站网时间:2019-12-02编辑:网友分享
相信做了前端开发的人都对ie开发者意见很大,他们昧着良心去破坏市场,本文是爱站技术频道小编带来的IE8中使用javascript动态加载CSS的解决方法。
相信做了前端开发的人都对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,例子:
看了爱站技术频道小编讲解的IE8中使用javascript动态加载CSS的解决方法?大家还有什么想了解呢?赶紧的来关注js.aizhan.com吧!
上一篇:分享nodejs分页类代码