使用JavaScript添加样式表IE 8

时间:2012-09-25 19:12:27

标签: javascript jquery internet-explorer internet-explorer-8

我正在制作一个缩放按钮来添加和删除CSS文件,由于某种原因我似乎无法在IE 8中添加它

首先我尝试了这个

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

给出jquery解决方案

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

似乎只能通过我的测试在FF和IE9中工作

我检查了溢出并发现了这个解决方案

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

但仍然没有被发现的爱,所以沮丧我找到了这个

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

我不确定会工作但最终我决定只是发布一个问题的时间。

我仍然不确定如何通过javascript删除样式表,但我需要先确定如何在IE 8中添加新的样式表。

2 个答案:

答案 0 :(得分:4)

也许这会有所帮助(对不起,不能在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);
})();

答案 1 :(得分:1)

要删除它,我会假设一个简单的remove()可以正常工作

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

使用此语法使用jQuery添加新链接:

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

或使用纯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);

还有很多其他的写法相同,但想法是一样的,删除旧的参考元素并添加一个新的。