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

Thanks in advance

BB

Answer 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?

Answer 2

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");

Answer 3

您可以通过创建一个<link>元素并将其添加适当的属性（ href ， type等）后将其附加到document.body来实现。

Answer 4

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);