Load/refer css file inside a javascript external file

Question

How can I load/refer to an external CSS file inside an external JS file.

As shown in the below image I would like to refer/load Default.css inside Common.js

enter image description here

Thanks in advance

BB

possible duplicate http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — grc, Feb 01 '12 at 19:57

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

You can't load a stylesheet "inside" JavaScript, you need to add the stylesheet to the DOM.

The link grc posted as a comment tells you how.

How to load up CSS files using Javascript?

edited May 23 '17 at 12:01

Community

1
1

answered Feb 01 '12 at 19:57

Diodeus - James MacFarlane

112,730
33
157
176

score 1 · Accepted Answer · answered Feb 01 '12 at 19:57

1

Create a new link tag in script, referencing your stylesheet.

Here's how you do it in jQuery:

$("<link/>", {
    rel: "stylesheet",
    type: "text/css",
    href: "your script here."
}).appendTo("head");

answered Feb 01 '12 at 19:57

jpda

738
5
16

How can I use the styles which are inside the CSS file. for ex : $('#txtExp').css(TextNormal); throws an error. TextNormal is a style inside Default.css. – BumbleBee Feb 01 '12 at 22:40
1

Once you load the CSS into the DOM, then those styles are available for assignment. What error are you getting? You may want to try `$("#txtExp").addClass("TextNormal");` – jpda Feb 01 '12 at 23:19
Is there an event you're doing this on? Like `$(document).ready?` Your CSS must be loaded into the DOM before this will work, i.e., you need to load your CSS before you try to do anything with it. – jpda Feb 02 '12 at 19:45

score 1 · Answer 3 · answered Feb 01 '12 at 19:57

1

You can do this by creating a <link> element and append it to document.body after adding proper attributes (href, type etc) to it.

answered Feb 01 '12 at 19:57

Shiplu Mokaddim

56,364
17
141
187

score 1 · Answer 4 · answered Feb 01 '12 at 20:02

You need to try and find the absolute path of the file Default.css within the application.

From Common.js, you would be able to load Default.css using something like this:

var linkEl = document.createElement('link');
linkEl.href='/App_Themes/Default/Default.css'; // start with slash '/' for absolute path
linkEl.rel='stylesheet';
linkEl.type='text/css';
document.getElementsByTagName('head')[0].appendChild(linkEl);

Load/refer css file inside a javascript external file

4 Answers4