How to insert external stylesheet in JavaScript (dynamically)

Question

...with right path.

For example. I have script called foo.js. I'd like to insert stylesheet declaration which I can do with following instruction:

$('head').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

Problem: I have to put full path to the stylesheet file. So instead of /template/foo.css I have to put: http://hostname/directory/template/foo.css. I can't set it statically beacause script can be placed in different servers and different locations. So it can be: http://foo.com/bar/foo.css or http://foo.com/foo.css.

It would be very useful if I can get path of foo.js file on the server. That would be good enough beacause then I could set stylesheet location based on the javascrpt's file.

Is there a definite relationship between the locations of foo.js and foo.css, such as the same directory? Or perhaps between the html page and the css file? — Justin Love
– Justin Love, Commented Jan 9, 2010 at 15:34
Yes. Let's just say that foo.js and foo.css are in the same directory. — Bald
– Bald, Commented Jan 10, 2010 at 12:35

slebetman · Accepted Answer · 2010-01-09 16:04:14Z

7

I've always done:

$('body').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

instead of head

Ahh... sorry I just realised what your problem is. One strategy is to extract the path of the script from the DOM itself:

$('script').each(function(i,el){
    var path = el.src.match(/^(.+)\/foo.js$/);
    if (path) {
        $('body').append('<link rel="stylesheet" ' +
                                'href="' + path[1] + '/foo.css" ' +
                                'type="text/css" />'
                        );
    }
})

edited Jan 9, 2010 at 16:04

answered Jan 9, 2010 at 15:52

slebetman

115k19 gold badges147 silver badges180 bronze badges

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

2 Comments

Christian C. Salvadó Over a year ago

You could use $('script[src]') to iterate only the script elements that have a src attribute...

Bald Over a year ago

Thank you. I thought there is another way to do that. But apparently not :) Anyway, thanks!

Christian C. Salvadó · Accepted Answer · 2010-01-09 15:53:13Z

2

This is a common technique that I use to get the current script url:

var scriptUrl = (function() {
  var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length - 1];

  return script.src;
})();

It works basically because when the script is being executed, it is the last script tag on the DOM.

answered Jan 9, 2010 at 15:53

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Comments

Andreas Bonini · Accepted Answer · 2010-01-09 15:01:14Z

0

You can use window.location and obtain the path from that. For example for this page it is:

>>> window.location
http://stackoverflow.com/questions/2033742/how-to-insert-external-stylesheet-in-javascript-dynamically

answered Jan 9, 2010 at 15:01

Andreas Bonini

45k31 gold badges126 silver badges158 bronze badges

1 Comment

mati Over a year ago

In this way you are obtaining the location object for the page where the css is included, not the css file location.

Collectives™ on Stack Overflow

How to insert external stylesheet in JavaScript (dynamically)

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related