javascript - 如何在css文件中动态添加css？

Question

我已经为网格写了一个js。 gird 有一个功能，我可以像这样在输入中获取每个列的宽度。

mygrid._struct = [{ fieldType : "deltaHedgeType", defaultWidth : 80},
           { fieldType : "quoteccy", defaultWidth : 40 }]

所以网格 html 生成这样

<table id="mygrid">
  <tr>
    <td class="deltaHedgeType"></td>
    <td class="quoteccy"></td>
  </tr>
  <tr>
    <td class="deltaHedgeType"></td>
    <td class="quoteccy"></td>
  </tr>
</table>

我希望这个 css 附加到 style.css 中

#mygrid .deltaHedgeType{
    width:40;
}
#mygrid .quoteccy{
    width:80;
}

我想到的是将此 css 附加到标记中的 header 中。因为 IE 浏览器有计数限制，它还会增加页面的 html 大小。那么我如何在 style.css 中附加此 css。

Answer 1

您必须解析 mygrid._struct 以获取 fieldType 和 defaultWidth，然后为每个元素使用以下代码

添加 css 的最终 javascript 将是

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#mygrid.'+fieldType+'{ width:'+defaultWidth+'; }';
document.getElementsByTagName('head')[0].appendChild(style);

对于 ie 限制，要么在一种已使用的样式上使用 id 并使用 jquery 引用它，要么创建一个新样式并将您的所有样式附加到该样式。

           $style = $('#MyGridStyle');
          if (!$style[0]) {
            $style = $("<style id='MyGridStyle' type='text/css' rel='stylesheet' />").appendTo($("head"));
          }

现在使用这个 $style 添加到这个

引用IE 8 and 7 bug when dynamically adding a stylesheet另一种解决方案