ansaurus

Question

Dynamically loading an external CSS file

Answer 1

A:

Dear Bro,

' document.createElement("link") ' creates hyper link object, not css style tag() element, so you are not able to apply this dynamically

correct me if i am wrong

chirag 2010-01-20 06:53:14

That is incorrect. It's a <link> element, which is exactly what he wants to load in an external stylesheet.

pib 2010-01-20 06:55:24

yes u r rite...i m just sleeping :(

chirag 2010-01-20 07:03:53

Answer 2

A:

That code should work, except perhaps you might want to add type="text/javascript" to your script tag.

I tested the code via Firebug and it worked for me.

Maybe the problem is that your original stylesheet is still included in the page and thus overriding the style of your secondary stylesheet?

pib 2010-01-20 06:56:25

Answer 3

A:

Try this:

var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)

Tim Goodman 2010-01-20 07:00:06

I'm not sure why it's not working for you . . . is your browser reporting any javascript errors? Can you confirm that the function is being called, and that it's getting to the line that would append the link (such as by sticking an alert in there and seeing if it gets called)? Also, what browser are you using, and what version?If you can answer these questions I'll try to help more.

Tim Goodman 2010-01-20 09:20:34

Answer 4

A:

Use this code

document.getElementsByTagName("head")[0].appendChild('

<link
> href="style.css" rel="stylesheet"
> type="text/css" />

');

it might work, your code may working but due to some another css it won't reflected.

chirag 2010-01-20 07:07:56

Answer 5

A:

Change this

<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a>

to

<a href="javascript:void(0)" onclick="loadjscssfile('oldstyle.css','css');">Load "oldstyle.css"</a>

I belive the onclick, event to href will reload the new file.

T.Raghavendra 2010-01-20 07:12:23

Answer 6

A:

First of all, you can't have an anchor element in the <head> section. Secondly, are you sure your CSS path is correct? I'm asking because you already have a reference to css/newstyle.css but your are trying to load newstyle.css. Are you sure it's not css/newstyle.css?

Edit: Here is a working example of your own code. There is something else wrong. Try to statically link the CSS and see if you are getting the styles. If not, there may be errors in your stylesheet.

By statically linking the stylesheet, I meant to say add this in your page instead of loading from javascript

<link rel="stylesheet" type="text/css" href="css/oldstyle.css" />

Chetan Sastry 2010-01-20 07:50:26

hi, i have changed it from newstyle.css to css/newstyle.css but still its nt working

Patel 2010-01-20 07:53:44

Well, is the file present in the folder?

Chetan Sastry 2010-01-20 07:56:04

ya its in the same folder path is correctly specified thats sure

Patel 2010-01-20 07:57:54

Is it working if you statically link it via a link tag? Are you sure there are no errors in the stylesheet?

Chetan Sastry 2010-01-20 08:01:47

ya i have tried that also when i click the link its just remains same color without any change .. even its not showing any errors also..

Patel 2010-01-20 08:04:42

Answer 7

A:

Tim Goodman's answer is correct, but instead of fileref.href = "filename"; it should be fileref.href = filename;

Otherwise you're trying to load a file with the name "filename" rather than what you passed to the script.

Alternately, if you're willing to use the jQuery library, this can be accomplished in one line:
$("head").append("<link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' />");

Also, about the first version of your script using setAttribute: Most browsers will only take setAttribute with an empty third parameter because of the way the spec is set up:
fileref.setAttribute("href", filename, "");

SphereCat1 2010-02-14 19:16:31

Answer 8

A:

Try adding a style line in your html and just using @import in the css to get the new file

2010-03-03 01:51:11

ansaurus

tags:

views:

answers:

Dynamically loading an external CSS file

related questions