代码之家  ›  专栏  ›  技术社区  ›  Tom Lianza

无法通过编程方式将CSS添加到IE

  •  4
  • Tom Lianza  · 技术社区  · 17 年前

    我有一个bookmarklet,它通过一个“link”标记(外部样式表)将CSS样式表插入到目标DOM中。

    document.getElementsByTagName('head')[0].appendChild(s);
    

    其中“s”是使用创建的链接对象 document.createElement . 甚至在Amazon上,我通过InternetExplorer开发者工具栏DOM检查器看到元素就在那里。 然而 如果我通知 document.styleSheets JavaScript中的集合,它不在那里。

    作为测试,我试着只使用IE document.createStyleSheet

    没有足够的存储空间供用户使用 完成此操作

    关注点:

    • 文件 document.createStyleSheet
    • 我在谷歌上搜索错误时发现了许多死胡同,唯一一个表明与样式表相关的是 this drupal post ,但它指的是内联样式的字符限制,而不是与外部样式相关的问题。
    • 同样的代码,甚至 createStyleSheet 呼叫,在IE中的其他站点上工作。

    这对我来说已经达到了“完全神秘”的状态。

    4 回复  |  直到 7 年前
        1
  •  4
  •   Mister Lucky    17 年前

    我刚试过这个

    javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);
    

    javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);
    

    为您找到了一个可能的解决方案。。。

    javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);
    

        2
  •  2
  •   Oso    13 年前

    为了寻找答案,我发现31个样式表的限制在以编程方式加载CSS时引发了这个异常:

    http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

    知识库文档中描述了最初的限制(仅在IE8及以下版本中提供,但在IE9中反复报告):

    http://support.microsoft.com/kb/262161

        3
  •  0
  •       17 年前

    这就是我所做的一切,我从未见过它不起作用。

    loadCss = function( name, url ) {
    
        var head = document.getElementsByTagName('head')[0];
    
        var link = document.createElement("link");
    
        link.setAttribute("type", "text/css");
    
        link.setAttribute("rel", "stylesheet");
    
        link.setAttribute("href", url);
    
        link.setAttribute("media", "screen");
    
        head.appendChild(link);
    };
    
        4
  •  0
  •   Ben New    15 年前

    我使用jQuery做了类似的事情,发现我必须按以下顺序进行:

    var $link = $('<link>');
    $('head').add($link);
    $link.attr({
      type: 'text/css',
      // ... etc ...
      media: 'screen'
    });