not able to import css file in js

Question

var cssId = '../../../css/export-csv.css';
 if (!document.getElementById(cssId))
 {
   var div = document.getElementsByTagName('div')[0];
   var link = document.createElement('link');
   link.id = cssId;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.media = 'all';
   div.appendChild(link);
 }

I want to import a CSS file named 'export-csv.css' in my js file but I am not able to do that. Thanks in advance

You set the files location to the links id not the href of it — d3vi4nt, Jan 06 '17 at 05:35
@DarshakGajjar `Possible duplicate of adding css file with jquery` - except there is no jQuery — Jaromanda X, Jan 06 '17 at 05:52
@DarshakGajjar - do you believe that anything jQuery can do can be done in javascript? — Jaromanda X, Jan 06 '17 at 05:58

score 0 · Answer 1 · answered Jan 06 '17 at 05:39

0

href is used to reference the id and move the link from one place to another where its not assign. If you want to assign any value make it as "ID or class" then it will easy for you to call in javascript.

answered Jan 06 '17 at 05:39

Pravin Bala

9
1

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Try document.getElementsByTagName( "head" )[0].appendChild( link ); instead of

var div = document.getElementsByTagName('div')[0];
div.appendChild(link);

and check that css file path is correct , it should resolve the issue. More details at How to load up CSS files using Javascript?

edited May 23 '17 at 12:13

Community

1
1

answered Jan 06 '17 at 05:41

Anurag Sinha

1,014
10
17

score 0 · Answer 3 · answered Jan 06 '17 at 05:46

function loadCSS(filename){ 

   var file = document.createElement("link");
   file.setAttribute("rel", "stylesheet");
   file.setAttribute("type", "text/css");
   file.setAttribute("href", filename);
   document.head.appendChild(file);

}

//just call a function to load a new CSS: loadCSS("path_to_css/file.css");

score 0 · Answer 4 · edited Jan 06 '17 at 06:30

0

Try this:

var div = document.createElement("div");

In place of:

var div = document.getElementsByTagName('div')[0];

Might be unable to find the div[0].

edited Jan 06 '17 at 06:30

Sebi

3,879
2
35
62

answered Jan 06 '17 at 05:53

CHANDAN KUMAR

1
1

Seth Holladay · Answer 5 · 2017-01-06T06:11:08.637

A few pieces are wrong here.

Your cssId looks like a file path. It could conceivably be an id but I doubt it.
There is no href. Since you are using an external stylesheet (<link> tag), your code needs to give the stylesheet an href, otherwise the browser will have no idea where to go fetch the styles from.
Inserting a stylesheet into a div is strange. It is more appropriate to put them in the head. While HTML5 does allow you to be a rebel, there are far more downsides than upsides to breaking this rule.

Here is a fixed example:

var cssId = 'some-legitimate-id';
 if (!document.getElementById(cssId))
 {
   var link = document.createElement('link');
   link.id = cssId;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.media = 'all';
   link.href = '../../../css/export-csv.css';
   document.head.appendChild(link);
 }

score 0 · Answer 6 · answered Jan 06 '17 at 06:00

So the following code should do the trick:

  var aCSS=document.createElement('link');
    aCSS.setAttribute('rel', 'stylesheet');
    aCSS.setAttribute('type', 'text/css');
    aCSS.setAttribute('href', 'someCssName');
    document.getElementsByTagName('head')[0].appendChild(aCSS);

You can also load it in a blocking way by using document.write. The issue with loading CSS dynamically is that it degrades the user experience a lot, as the user will see a flickering of things at best case, and two different stories of the same element at worst case (slow css loading). I am not sure what is the use case, but please be careful when loading CSS dynamically.

I would suggest you using gulp or grunt to combine your css into one minified file and this would be a better approach IMO.

not able to import css file in js

6 Answers6