如何在css文件中添加css動作？

Question

我寫了一個js的網格。網格有一個功能，我在這裏輸入每個列的寬度。

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 。因爲IE瀏覽器有數量限制，也增加了頁面的html大小。所以我如何在style.css中附加這個CSS。

Answer 1

你必須分析mygrid._struct得到的字段類型和defaultWidth，然後爲每個eleement使用下面的代碼

最後的javascript添加CSS將

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

對於即限制或者使用一個ID在一個已經使用過的風格和引用它使用jquery或創建一個新的，並附加所有你的風格，這一個。

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

現在用這個$風格添加到這個

參考IE 8 and 7 bug when dynamically adding a stylesheet另一種解決方案