javascript - how to add css in css file dynmically? -

i have written js grid. gird have feature taking each column width in input this.

mygrid._struct = [{ fieldtype : "deltahedgetype", defaultwidth : 80},            { fieldtype : "quoteccy", defaultwidth : 40 }] 

so grid html generate this

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

i want css append in style.css

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

what come in mind append css in header in tag. coz ie browser have limitation of count , increase html size of page. how append css in style.css.

you have parse mygrid._struct fieldtype , defaultwidth , each eleement use following code

the final javascript add css

var style = document.createelement('style'); style.type = 'text/css'; style.innerhtml = '#mygrid.'+fieldtype+'{ width:'+defaultwidth+'; }'; document.getelementsbytagname('head')[0].appendchild(style); 

for ie limit either use id on 1 of used style , refere using jquery or create new 1 , append ur style one.

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

now use $style add

refer ie 8 , 7 bug when dynamically adding stylesheet solution