IE8动态创建CSS
IE8动态创建CSS
最近在项目中用到在页面中动态创建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,猎豹环境下测试无问题