IE8动态创建CSS

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下动态创建　　　

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

 组合之后方法　　　

 // 动态插入 CSS 代码
 function dynamInsertCss(classStr) {
     // IE 浏览器
     if (document.all) {
         /**
          * 此方法参考 https://blog.chou.it/2013/06/load-dynamic-css-under-ie8/?utm_source=tuicool&utm_medium=referral
          * 此方法需要拆开单个的规则,然后依次调用 addRule
         var styleDom = document.createStyleSheet(),
             rules = classStr.replace(/\/\*[^\*]*\*\//g, "").replace(/@[^{]*\{/g, '').match(/[^\{\}]+\{[^\}]+\}/g),
             m;
         for (var i = 0, len = rules.length; i < len; i++) {
             m = rules[i].match(/(.*)\s*\{\s*(.*)\}/);
             if (m) {
                 try {
                     styleDom.addRule(m[1], m[2])
                 } catch(e) {}
             }
         }
         */

         // 此方法参考 http://help.dottoro.com/ljpxthtl.php
         var styleSheet = document.createStyleSheet("");
         styleSheet.cssText = classStr;
     } else {
         var styleDom = document.createElement('style');
         styleDom.type = 'text/css';
         styleDom.innerHTML = classStr;
         document.getElementsByTagName('HEAD').item(0).appendChild(styleDom)
     }
 }
 // 调用
 dynamInsertCss("body{background: black;}#id{background: blue;}.class{background: red}");

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