2

I'm new to javascript. I'm trying to load a .css file using the following javascript code, but it seems not working.

var myCss = document.createElement("link");
myCss.type = "text/css";
myCss.rel = "stylesheet";
myCss.href = "mycss.css";
document.getElementsByTagName("head")[0].appendChild(myCss);

Can anyone help? thanks.

sigant
  • 25
  • 1
  • 4
  • 1
    Is there a particular reason you're loading the CSS dynamically via JS instead of just linking it in with the html? (like this: http://www.w3schools.com/tags/tag_link.asp) – dkniffin Oct 07 '13 at 22:22
  • make sure that the ***mycss.css*** file is located in the same place as the page running the code.. – Gabriele Petrioli Oct 07 '13 at 22:23
  • Your code is fine. Post more context in the question. –  Oct 07 '13 at 22:23
  • Thanks for all your replies. I'm 100% sure my css file is place in the same directory of the html, and the file name is "mycss.css". But it still doesn't work.... – sigant Oct 08 '13 at 14:56

2 Answers2

2

You have in stackoverflow another question about it, you can find it here: How to load up CSS files using Javascript?

Which is a "oldschool" way to do it, just like user58777 said. (Credits go to him)

His code:

var $ = document; // shortcut
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}
Community
  • 1
  • 1
xickoh
  • 304
  • 3
  • 10
1

Why are you trying to do this? What benefit are you expecting?

I've never come across a situation where this is a good idea. CSS files are usually pretty small, so you aren't really gaining much by loading them dynamically. Just do the load in the head tag.

Anyway, the code you have should work. Just be sure that path is correct (it will be relative to the html file you're running)

Another solution would be to load an html file with all of the markup you need, and append it to the body. Check out the jQuery.load function The line below will load gameMarkup.html into the body tag. 

$( "body" ).load( "gameMarkup.html" );

You can include all of the markup for your game here (not just styles). Generating elements with js can be useful, but it makes the code harder to maintain.

If you aren't using jquery, you can do the same thing with XHR, but it will be a lot more lines of code.

posit labs
  • 8,951
  • 4
  • 36
  • 66
  • Thanks for reply. Actually, what I'm trying to do is to create a "web game library", that user can "embed" my games using code like below: The insertGame() function will create some elements to form a game, and these elements need css styling. I know this can be done by requiring the user to add code like: – sigant Oct 08 '13 at 14:51
  • but I just want to know if it is possible to do this in my javascript. Thanks. – sigant Oct 08 '13 at 14:52