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
1
-
1possible duplicate stackoverflow.com/questions/574944/…grc– grc2012-02-01 19:57:00 +00:00Commented Feb 1, 2012 at 19:57
Add a comment
|
4 Answers
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");
3 Comments
BumbleBee
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.
jpda
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
Is there an event you're doing this on? Like
$(document).ready? Your CSS <em>must</em> 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.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.
answered Feb 1, 2012 at 19:57
Diodeus - James MacFarlane
115k33 gold badges164 silver badges180 bronze badges
Comments
You can do this by creating a <link> element and append it to document.body after adding proper attributes (href, type etc) to it.
Comments
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);
