Image by vjl via Flickr
Can you please tell me how to add external stylesheets with JavaScript? I’m trying to add them by creating a link element with a rel=”stylesheet”, type=”text/css” and a valid href and then appending this to the head element but it doesn’t seem to work. I’m quite sure my css files are good since when stripped down they only contain body {background-color:#ff0000;}
.
It’d be great if you could post a solution because I really don’t want to spend another hour thinking about this – I already spent four and I got nowhere.
what about import?
oh… something ate my code lol
Hey,
My ScriptCoreLib frameworks uses the following:
1. add a new STYLE with content default /**/ to HEAD element
2. call insertRule or addRule to specify selector
3. access the .style member on the newly created rule to set values
This might not work on older opera versions like the one i have on my Amino 110 IPTV…
ScriptCoreLib is written in c# yet you might find it as a good reference:
http://jsc.svn.sourceforge.net/viewvc/jsc/core/ScriptCoreLib/JavaScript/DOM/IStyle.cs?revision=733&view=markup
Interesting approach. Ghastly, but interesting nevertheless.
I’ve got an idea of my own – add a style and include a stylesheet with an import rule. Have to test it…
I’ve been debugging this a bit – when I make a simple example it works flawlessly. So I went back to WordPress where the problem first occured and it still does. From what I gathered the link element is added to the head and is also present in the
document.styleSheets
array but itscssRules
array breaks Opera when accessed, whilehref
is returned normally.Even if analysis is postponed the stylesheet remained disabled and without the cssRules array. Weird.
It seems the stylesheet doesn’t load only when I’m serving it from a local Apache server…