IE8动态创建CSS

最近在项目中用到在页面中动态创建ＣＳＳ方法，记录一下方便以后查看

一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因)

第一种(此方法很麻烦,需要把字符串拆开写,长一点的话受不了)
var sheet = document.createStyleSheet();
sheet.addRule('body', 'background-color: red');
第二种(此方法来自于一个国外网站)
var styleSheet = document.createStyleSheet("");
styleSheet.cssText = 'body{background-color: red}';
第三种(此方法测试失败)
window.style = "body{background-color: blue;";
document.createStyleSheet("javascript:style");

二. 在非IE下动态创建　　　

1 var styleDom = document.createElement('style');
2 styleDom.type = 'text/css';
3 styleDom.innerHTML = 'body{background-color: red}'; 
4 document.getElementsByTagName('HEAD').item(0).appendChild(styleDom)

组合之后方法　　　

 1 // 动态插入 CSS 代码
 2 function dynamInsertCss(classStr) {
 3     // IE 浏览器
 4     if (document.all) {
 5         /**
 6          * 此方法参考 https://blog.chou.it/2013/06/load-dynamic-css-under-ie8/?utm_source=tuicool&utm_medium=referral
 7          * 此方法需要拆开单个的规则,然后依次调用 addRule
 8         var styleDom = document.createStyleSheet(),
 9             rules = classStr.replace(/\/\*[^\*]*\*\//g, "").replace(/@[^{]*\{/g, '').match(/[^\{\}]+\{[^\}]+\}/g),
10             m;
11         for (var i = 0, len = rules.length; i < len; i++) {
12             m = rules[i].match(/(.*)\s*\{\s*(.*)\}/);
13             if (m) {
14                 try {
15                     styleDom.addRule(m[1], m[2])
16                 } catch(e) {}
17             }
18         }
19         */
20 
21         // 此方法参考 http://help.dottoro.com/ljpxthtl.php
22         var styleSheet = document.createStyleSheet("");
23         styleSheet.cssText = classStr;
24     } else {
25         var styleDom = document.createElement('style');
26         styleDom.type = 'text/css';
27         styleDom.innerHTML = classStr;
28         document.getElementsByTagName('HEAD').item(0).appendChild(styleDom)
29     }
30 }
31 // 调用
32 dynamInsertCss("body{background: black;}#id{background: blue;}.class{background: red}");

　　　已经在IE8,IE10,Edge,猎豹环境下测试无问题