Adding a style sheet IE 8 with JavaScript

Question

I'm making a zoom button to add and remove a CSS file and for some reason I can't seem to add it in IE 8

First I tried this

document.createStyleSheet('style/zoom.css');

given that the jquery solution

$("head").append($("<link my style sheet />"));

seems to only work in FF and IE9 via my testing

I checked around the overflow and found this solution

 $('#zoomlink').replaceWith($('<link>', {
        id: 'zoomlink',
        href: 'style/zoom.css',
        type: 'text/css',
        rel: 'stylesheet' 
 }));

But still no love to be found so then frustrated i found this

var $link = $('&lt;link&gt;');
    $('head').add($link);
    $link.attr({
      type: 'text/css',
      href: 'style/zoom.css',
      type: 'text/css',
      rel: 'stylesheet',
      media: 'screen'
});

which im not certain would ever work but then finally i decided it way time to simply post a question.

I'm still not certain on how to remove the style sheet later via javascript but I need to first determine how to add a new style sheet in IE 8.

well now it throws an error "expected identifier" in regards to $('<link>'); — ert3
– ert3, Commented Sep 25, 2012 at 20:13

Igor Shastin · Accepted Answer · 2012-09-25 19:30:32Z

4

Maybe this will help (Sorry, can't try it in IE8):

(function() {
    var s  = document.createElement('link');
    s.type = 'text/css';
    s.rel  = 'stylesheet';
    s.href = 'http://yourdomain.com/style.css';
    document.getElementsByTagName("head")[0].appendChild(s);
})();

answered Sep 25, 2012 at 19:30

Igor Shastin

2,8982 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Igor Shastin Over a year ago

To remove this stylesheet later, use document.getElementsByTagName("head")[0].removeChild(s);

Igor Shastin Over a year ago

@ert3 Please try it out in JSFiddle: jsfiddle.net/ZT6nt. CSS property "font-size" must increase after click on "Add" and decrease after "Remove".

Nope Over a year ago

@IgorShastin: Sweet how you go that to work in jsfiddle. I tried and inspecting the DOM it just would not work but did work in a normal web app. I keep a copy of that for the settings on the fiddle. +1 nice one.

ert3 Over a year ago

i should not have jumped to conclusions you sir are a life saver

IceCode Over a year ago

YES, document.getElementsByTagName("head")[0].appendChild(fileref); fixed my IE8 error. Was using jQuery("head").append(fileref); which did not work properly. Thank you mr. @IgorShastin Any ideas why plain javascript worked indsted of jQuery here?

Nope · Accepted Answer · 2012-09-25 19:36:16Z

1

To remove it I would assume a simple remove() would work

$("#zoomlink").remove();

To add a new link using jQuery with this syntax:

$("head").append(unescape("%3Clink id='zoomlink' rel='stylesheet' type='text/css' href='style/zoom.css'%3E%3C/link%3E"));

or using pure JavaScript

var e = document.createElement('link');
e.id = 'zoomlink'
e.rel = 'stylesheet';  
e.type='text/css';
r.href='style/zoom.css'
document.getElementsByTagName("head")[0].appendChild(e);

There is many other way of writing the same but the idea is the same, remove the old reference element and add a new one.

edited Sep 25, 2012 at 19:36

answered Sep 25, 2012 at 19:30

Nope

22.4k8 gold badges50 silver badges73 bronze badges

2 Comments

Nope Over a year ago

@ert3: It is hard to test in a fiddle cause fiddle places the executed code inside a frame or something but I did try that code in a proper application before. Sorry it didn't work. Maybe it is to do with the HTML or when exactly you are calling the code to remove and re-add.

ert3 Over a year ago

i thought of that to and while you'd think that would be the situation the click function seems to work just fine

Collectives™ on Stack Overflow

Adding a style sheet IE 8 with JavaScript

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related