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,猎豹环境下测试无问题