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添加到标记中的标题中。 coz 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引用它，要么创建一个新的并将所有ur样式附加到此样式。

           $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了解其他解决方案

Answer 2

你可以直接把CSS写到html页面的头部 - 我在这里找到了一个很好的例子：Add CSS to <head> with JavaScript?

Answer 3

在CSS文件中，您可以使用@import url("/css/filename.css")导入一个新的css文件，该文件会动态刷新并用于某些特殊用途。

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

3 个答案: