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
– Nishan Senevirathna

2014-06-26 05:08:11 +00:00
Commented Jun 26, 2014 at 5:08 — Nishan Senevirathna
– Nishan Senevirathna, Commented Jun 26, 2014 at 5:08

Community · Accepted Answer · 2017-05-23 12:18:33Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Jun 26, 2014 at 5:10

Dev

6,7962 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amit Over a year ago

i have this solution. what i want is the css append to style.css not in html

Dev Over a year ago

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.

Amit Over a year ago

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 <style> tag.

Community · Accepted Answer · 2017-05-23 10:32:21Z

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, 2017 at 10:32

CommunityBot

11 silver badge

answered Jun 26, 2014 at 5:15

PokeItWithAStick

3162 silver badges9 bronze badges

2 Comments

Amit Over a year ago

i have this solution. what i want is the css append to style.css not in html

PokeItWithAStick Over a year ago

I found an article doing just that on David Walsh's blog http://davidwalsh.name/add-rules-stylesheets

meeming · Accepted Answer · 2014-06-26 05:31:44Z

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, 2014 at 5:31

meeming

8813 bronze badges

Collectives™ on Stack Overflow

how to add css in css file dynmically?

3 Answers 3

3 Comments

2 Comments

Comments

Hot Network Questions