Question

我创建了一个执行以下代码的bookmarklet，为页面添加了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/

Answer 1

我认为你的问题就在这一行：

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

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

在此处检查style的规范（Text Node是流量内容）。

您可以找到以横向浏览器方式here创建样式元素的好方法。

Answer 2

可能是因为您忘记添加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

尝试在onload函数中包装javascript。首先添加：

<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);
}

Answer 3

我不确定你为什么在IE10中收到错误...我知道在IE＆lt; 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');

希望这有帮助。

Answer 4

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

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

动态地添加样式部分而不是属性，对我来说似乎有些过分。

对方法或属性访问的意外调用 - appendChild（）

4 个答案: