-1

Not sure if this is possible and I've had a quick search but nothing's came up for me so I am wondering if it is possible to link a CSS file through JavaScript?

So basically I want to call a style sheet when I use a particular piece of JS.

Is this doable?

SaturnsEye
  • 6,297
  • 10
  • 46
  • 62
  • 1
    [quick search found: linking css with javascript](http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) – Bhojendra Rauniyar Apr 29 '14 at 07:42
  • 1
    http://yepnopejs.com/ you can define rules in special situations to load css or js asynchonous at the point you like – gulty Apr 29 '14 at 07:44
  • @martynas It is not so strange to want to load CSS dynamically. – npup Apr 29 '14 at 07:48

3 Answers3

2

Yes, it's perfectly doable.

The easiest solution is to have a script in the head of your html file (or called from that head) with some code like this :

document.write('<link rel="stylesheet" type="text/css" href="'+path+'"/>');

Don't abuse that. The main use case is for skins but it has obviously a cost, especially if you call an external script.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    document.write might not be a good choice, since it will erase the page if done after page is loaded. – npup Apr 29 '14 at 07:47
  • @npup How is that a problem if it's done in the HEAD ? It **is** the best solution because you want to load the CSS before rendering the page. – Denys Séguret Apr 29 '14 at 07:49
  • yes, but head might be rendered long since if one wants to load css dynamically (ie when some widget is about to be used or something). OP didn't clearly state this, but simply wanting to use a script tag in the head instead of a style tag is kinda useless, so.. – npup Apr 29 '14 at 07:51
  • 1
    I'd rather see dome DOM manipulation (Yes, even in the head), or even `innerHTML`, than `.write`. `.write` is like the `eval` of html manipulation... – Cerbrus Apr 29 '14 at 07:51
  • Just like `eval`, it has some use cases. Don't just follow rules like "eval is evil", learn the limits and be careful. Changing the DOM here is a bad heavier idea . – Denys Séguret Apr 29 '14 at 07:54
  • _"Changing the DOM here is a bad heavier idea."_ Why is that? – Cerbrus Apr 29 '14 at 08:02
  • You don't want to change the DOM, it's the first read. You want it to be right first time and you want the styles to start loading right now. – Denys Séguret Apr 29 '14 at 08:04
  • Thank you, I knew there would be a way :) – SaturnsEye Apr 29 '14 at 08:04
  • Fair point on the "want the style to start loading right now". – Cerbrus Apr 29 '14 at 08:12
0
$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");
Animesh
  • 1,005
  • 10
  • 20
0

Try this:

document.head.insertAdjacentHTML('beforeend', "<link href='my.css' type='text/css' rel='stylesheet' />");

This adds a new css link at the end of the <head> element, without messing with the DOM in any way.

"It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation." - developer.mozilla.org

insertAdjacentHTML is a relatively unknown function, but well supported.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147