how to add css in css file dynmically?

Question

i have written a js for grid. gird have a feature where i am taking each column width in input like this.

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

So the grid html generate like 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 this css to append in style.css

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

what come in my mind append this css in header in tag. coz IE browser have limitation of count and also its increase the html size of the page. so how do i append this css in style.css.

You can change css property's value dynamically. – Nishan Senevirathna Jun 26 '14 at 05:08 — Nishan Senevirathna, Jun 26 '14 at 05:08

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

You have to parse mygrid._struct to get fieldType and defaultWidth and then for each eleement use following code

The final javascript to add css will be

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 an id on one of the already used style and refere it using jquery or create an new one and append all ur style to this one.

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

now use this $style to add to this

Refer IE 8 and 7 bug when dynamically adding a stylesheet for another solution

edited May 23 '17 at 12:18

Community

1
1

answered Jun 26 '14 at 05:10

Dev

6,628
2
25
34

i have this solution. what i want is the css append to style.css not in html – Amit Jun 26 '14 at 05:12
What will be benifit of adding to style.css as it will be only a local change and will be reverted back to old one once page is refreshed. – Dev Jun 26 '14 at 05:17
where i am using this grid is single page application. and more than 15 grid going to use and each grid have more than 20 column. so the size of css will be huge. and other limitation as i mention in my question that IE have limit on appending – Amit Jun 26 '14 at 05:21

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

You could write the CSS directly to the head of the html page - I found a good example here: Add CSS to <head> with JavaScript?

edited May 23 '17 at 10:32

Community

1
1

answered Jun 26 '14 at 05:15

PokeItWithAStick

316
2
9

i have this solution. what i want is the css append to style.css not in html – Amit Jun 26 '14 at 05:17
I found an article doing just that on David Walsh's blog [http://davidwalsh.name/add-rules-stylesheets](http://davidwalsh.name/add-rules-stylesheets) – PokeItWithAStick Jun 26 '14 at 05:43

score 0 · Answer 3 · answered Jun 26 '14 at 05:31

0

Inside CSS file, you could use @import url("/css/filename.css")to import a new css file which is dynamically refreshed and use for some special purpose.

answered Jun 26 '14 at 05:31

meeming

88
13

how to add css in css file dynmically?

3 Answers3