0

我创建了一个执行以下代码的小书签，将 css 样式添加到页面。它适用于 Chrome 和 Firefox 中所有尝试过的网站，但在 IE 上的某些网站上失败。失败的总是相同的站点。

对于某些站点，第四行因“意外调用方法或属性访问”而失败，仅在 IE 上。

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(""));
head.appendChild(style);

在 IE 10 上失败的两个站点：

http://www.momswhothink.com/cake-recipes/banana-cake-recipe.html

http://www.bakerella.com/
4

4 回答 4

3

我认为你的问题是这一行：

style.appendChild(document.createTextNode(""));

在这里，您将 a 插入Text Node到Style元素中，根据 HTML 规范，这是不允许的，除非您scoped在样式上指定属性。

在这里检查样式的规范（Text Node是流内容）。

您可以在此处找到以跨浏览器方式创建样式元素的好方法。

于 2013-08-23T19:27:32.903 回答
0

我不确定您为什么在 IE10 中遇到该错误...我知道在 IE<9 中，如果您尝试修改<style>标签的 innerHTML，则会引发错误。它仍然是可行的，你只需要做一些解决方法。例如（使用 jQuery）：

var customCSS = "body { color: red; }";
var customStyle = $('<style type="text/css" />');
try {
    $(customStyle).html(customCSS); // Good browsers
} catch(error) { 
    $(customStyle)[0].styleSheet.cssText = customCSS; // IE < 9
}
$(customStyle).appendTo('head');

希望这可以帮助。

于 2013-08-23T19:34:18.687 回答
0

您真的必须将样式部分动态添加到页面吗？如何动态添加属性本身，如下所示：

$(document).ready( function() {
    $('[id="yourObjID"]').css('yourAttribute','itsvalue');
});

对我来说，动态添加样式部分而不是属性似乎有点矫枉过正。

于 2014-05-06T03:12:31.113 回答
0

可能是因为您忘记添加 document.ready()

使用 jQuery

$(document).ready(function(){
  var head = document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(""));
  head.appendChild(style);
});

使用 javascript

尝试将您的 javascript 包装在 onload 函数中。所以首先添加：

<body onload="load()">

function load() {
      var head = document.getElementsByTagName('head')[0];
      var style = document.createElement('style');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(""));
      head.appendChild(style);
}
于 2013-08-23T19:04:12.163 回答