Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1161
  • Last Modified:

Adding css style from js file crashes IE

Hi all,

From a js file I want to add the following to the head tag:
<style type="text/css">
 @import "http://www.myweb.com/css/style.css";
</style>

I'm using the code below, and it works perfect for Firefox and the rest, but it crashes Internet Explorer.
Can someone please give me a hand with it??

Thanks a ton in advance!

function newScript4(){
var js4=document.createElement('style');
js4.setAttribute("type","text/css");
var thetext = "@import 'http://www.myweb.com/css/style.css';";
 
if (js4.styleSheet) {   // IE
    js4.styleSheet.cssText = thetext; // this line crashes IE
    js4.styleSheet.addImport('http://www.myweb.com/css/style.css'); //this other line cashes IE too
} else {                // the world
    var tx = document.createTextNode(thetext);
    js4.appendChild(tx);
}
 
document.getElementsByTagName('head')[0].appendChild(js4)
}
 
newScript4();

Open in new window

0
Dada44
Asked:
Dada44
  • 2
1 Solution
 
David S.Commented:
Try using

js4.innerHTML

 instead of

js4.styleSheet.cssText
0
 
Dada44Author Commented:
Kravimir, thanks a lot for answering.

Following your suggestion I'm using the code below.
It does not crash Internet Explorer, but I get a "unknown error in execution time" error and I cannot see the style imported in the source code :(
Did I get your suggestion correctly?
Thanks again!
function newScript4(){
var js4=document.createElement('style');
js4.setAttribute("type","text/css");
var thetext = "@import 'http://www.myweb.com/css/style.css';";
 
if (js4.styleSheet) {   // IE
    js4.innerHTML = thetext; // this line crashes IE
    js4.styleSheet.addImport('http://www.myweb.com/css/style.css'); //this other line cashes IE too
} else {                // the world
    var tx = document.createTextNode(thetext);
    js4.appendChild(tx);
}
 
document.getElementsByTagName('head')[0].appendChild(js4)
}
 
newScript4();

Open in new window

0
 
kurijovCommented:
If you use js framework such as prototype, then this is your code

function loadCSS(css_name, id) {
    var head = $$('head')[0];
    var css = new Element('link', {type: 'text/css', rel: 'stylesheet', href: css_name, media: 'screen'});
    if (id)
        css.id = id;
    else
        css.identify();
    head.insert(css);
}

loadCSS('http://www.myweb.com/css/style.css')

If not, then your code in the snippet. Have a nice day)

function loadCSS(css_name) {
	var head = document.getElementsByTagName('head')[0];
	var css = document.createElement('link');
	css.setAttribute('href', css_name);
	css.setAttribute('type', 'text/css');
	css.setAttribute('media', 'screen, projection');
	css.setAttribute('rel', 'stylesheet');
	head.appendChild(css);
}
 
loadCSS('http://www.myweb.com/css/style.css');

Open in new window

0
 
Dada44Author Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now