为什么不应用样式表（通过jQuery添加）？

Question

这是一个相当复杂的问题 - 至少对我而言。

我已经写了一个书签（是的，我在“必要”时做了这些事情），它在我到目前为止测试的每个页面上都能正常工作。但今天我遇到了一个不起作用的地方，我不知道为什么。

bookmarklet在head-tag的末尾添加内联样式表。然后它在body的末尾添加一个div，其id也在样式表中。

通常情况下这是有效的，但我意识到它有点偶然。据我所知，这是一个灰色区域，但也许有人比我更清楚，至少可以给出一些建议吗？ （我可以应用直接样式，是的，但是如果可能的话我想避免它，因为这是一个维护负担。）

书签在这里： http://dl.dropbox.com/u/848981/it/cw/cw.html

它不起作用的页面在这里： http://www.professionalsagainstect.com/index.html

更新：一些信息可以让您更轻松地查看它。点击书签后：

• 查看样式表的head标记的结尾。它获得以“cw.css ...”开头的title属性。

• 应该应用它的div标签位于body标签的末尾，并且id =“shield-findword72789”。

更新2 ： 看起来我添加的样式表在 body 部分中存在类似内容时未应用：

<link rel="stylesheet" type="text/css" href="data:text/css.">

为了解决这个问题，我将最重要的样式直接应用到我添加的元素中。

Answer 1

href元素附加到link后，需要定义<{1}}属性，如下所示：

head

这是小书签版本：

function foo()
  {
  /* get head element */
  var head=document.getElementsByTagName("head")[0];

  /* create link element */
  var qUnitCSS = document.createElement("link");

  /* rel and type attributes required for lazy loading */
  qUnitCSS.rel="stylesheet";
  qUnitCSS.type="text/css";

  /* append link element */
  head.appendChild(qUnitCSS);

  /* define link href after DOM insertion to lazy load */
  qUnitCSS.href="http://qunitjs.com/resources/qunit.css";    
  }()