前两天弄了个一个在线编辑器，搞了一个设置 H1 标签到 H6 标签的字体颜色，我开始是傻傻的获取页面全部标题标签然后再循环设置里面的颜色…

周报日报在线编辑器：https://github.com/PBK-B/hxb_report_md_edit

// 设置报告全部 h 标签字体颜色 ( 该方法有Bug,被废弃 )
for (var i = 0; i < 6; i++) {
   var HTag = document.getElementsByTagName('h' + i);
   for (var i2 = 0; i2 < HTag.length; i2++) {
      HTag[i2].style.color = color;
   }
}

居然有 Bug ，由于是 js 解析的 html 标签每次输入就会重新解析导致设置的 style.color 就会丢失，标签都重新生成了… 于是我想到曲线救国的用 js 生成一段 css 试试

方法很直接，就是直接创建一个 style 元素，然后设置 style 元素里面的 css 代码，最后把它插入到 head 元素中。但有些兼容性问题我们需要解决。首先在符合 w3c 标准的浏览器中我们只需要把要插入的 css 代码作为一个文本节点插入到style 元素中即可，而在IE中则需要利用 style 元素的 styleSheet.css 来解决。还需要注意的就是在有些版本 IE 中一个页面上 style 标签数量是有限制的，如果超过了会报错，需要考虑这点。

function addCSS(cssText){
    // 创建一个style元素并获取head元素
    var style = document.createElement('style'),head = document.head || document.getElementsByTagName('head')[0];
    style.type = 'text/css';
    // 这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
    if(style.styleSheet){
      var func = function(){
          try {
            // 防止IE中stylesheet数量超过限制而发生错误
            style.styleSheet.cssText = cssText;
          }catch(e) {

          }
      }
      // 如果当前styleSheet还不能用，则放到异步中则行
      if(style.styleSheet.disabled){
        setTimeout(func,10);
      } else {
        func();
      }
    } else {
      // w3c浏览器中只要创建文本节点插入到style元素中就行了
      var textNode = document.createTextNode(cssText);
      style.appendChild(textNode);
    }
    // 把创建的style元素插入到head中
    head.appendChild(style);
}

// 使用
addCSS('#demo{ height: 30px; background:#f00;}');

当然这只是一个最基本的解决方法，实际运用中还需进行完善，比如把每次生成的css 代码都插入到一个 style 元素中，这样在 IE 中就不会发生 stylesheet 数量超出限制的错误了。