何时将样式表添加到 document.styleSheets答案

【问题标题】：When is a stylesheet added to document.styleSheets何时将样式表添加到 document.styleSheets
【发布时间】：2011-12-25 00:23:16
【问题描述】：

我正在尝试使用 javascript 动态添加 css 样式表规则，例如示例 2 here.

它在大多数情况下都有效，但似乎存在一种竞争条件，使其有时在（至少）Chrome（15.0.874 和 17.0.933）中失败。当缓存为空（或已被清除）时，这种情况很少发生。

这是我能够缩小范围的内容。首先，我通过将外部样式表附加到<head> 来加载它，然后我创建一个新样式表（我将在其中添加规则）。然后我打印 document.styleSheets 的长度（立即和 1 秒后）。

$(function() {
    // it doesn't happen if this line is missing.
    $("head").append('<link rel="stylesheet" type="text/css"'+
                     'href="/css/normalize.css" />');

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

    var b = $('body');
    b.append(document.styleSheets.length).append('<br/>');
    setTimeout(function() {
        b.append(document.styleSheets.length).append('<br/>');
    }, 1000);
});

（在http://jsfiddle.net/amirshim/gAYzY/13/玩它）

当缓存被清除时，它有时会打印2 然后是4（jsfiddle 添加它自己的2个css文件），这意味着它不会立即将任何一个样式表添加到document.styleSheets...但可能等待外部文件加载。

这是预期的吗？

如果是这样，Example 2 on MDN（以及其他许多人）是否坏了？从第 27 行开始：

var s = document.styleSheets[document.styleSheets.length - 1];

可能会使用document.styleSheets.length == 0进行评估

请注意，当我不先加载外部 CSS 文件时，不会发生这种情况。

【问题讨论】：

我想问你想要的最终结果是什么。在什么情况下，您希望将规则“注入”到 css 文件中，而不是首先将其写入 css 文件中？
我也在动态添加样式表...但仅在 $(document).ready 触发后...
@Kees：我给出的代码是在$(document).ready 中执行所有操作。这就是$(function() {...}); 所做的。
@Sotkra 我们有一个开发人员工作流程（不一定是合理的），有时只修改您正在处理的 JS 文件比修改 JS 和（共享）CSS 文件更容易，所以我提供一个函数addRule(...)，它允许开发人员为 js 文件生成的页面动态添加规则。通常它们会在以后合并到 CSS 文件中。另一个原因是动态风格的变化；看看jqueryui.com/themeroller

标签： javascript jquery css google-chrome stylesheet

【解决方案1】：

这应该有帮助：'When is a stylesheet really loaded'

至于“示例 2”。如果调用 addStylesheetRules() 时加载样式表，它会中断，当然这是在 Chrome 中。

【讨论】：

所以示例 2 并不总是有效。即如果我（或其他 js 库）在调用 addStylesheetRules() 之前添加了一个外部样式表。

【解决方案2】：

如果 JavaScript 位于 CSS 下方的页面中（几乎总是如此），HTML 解析器必须等待 JS 执行，直到 JS 和 CSS 完全加载和解析，因为 JS 可能会请求样式信息（仅限 Chrome当脚本实际执行此操作时会执行此操作）。这有效地使外部 CSS 的加载几乎在所有情况下都阻塞。当您稍后通过 JavaScript 插入它们或页面中没有 JS（或 JS 以非阻塞方式加载）时，CSS 会异步加载，这意味着它们在不阻塞 DOM 解析的情况下被加载和解析。因此，documents.stylesheets 计数仅在工作表位于 DOM 内后才会更新，并且仅在其完全加载和解析后才会更新。

在这种情况下，可能会涉及一些时间差异。考虑到大多数浏览器只有有限数量的管道用于加载数据（有些只有两个，如 IE6，大多数有 6 个，有些甚至有 12 个，如 IE9），样式表的加载被添加到要加载的队列的末尾. 浏览器仍在加载内容，因为您调用了 DOMReady 上的函数。这会导致样式表在一秒钟后没有完全加载和解析，因此不会影响 document.stylesheets.length。

我在网络上遇到的所有样式表示例都假定 dom 已完全解析和加载。 OffDOM 样式表甚至不允许插入或检查规则，因为它们可以具有 @import 规则并且必须从外部加载这些规则，因此对于浏览器来说，很难确定何时可以安全地与表单交互，除非它们'已完全加载和解析。 OffDOM 样式表确实公开了一个空的工作表属性，但在工作表被添加到 DOM 之前不会让您与之交互。

我一直发现动态插入样式表并在该表中执行所有更改并单独保留 document.stylesheets 会更好。这具有很大的优势，当您覆盖具有相同特异性的样式时，您不会因为插入错误的工作表而遇到麻烦。由于 document.stylesheets 是一个活动的节点列表，因此 document.stylesheets[ 2 ] 可以在您每次调用该函数时指向另一个工作表（除非存储在 var 中）。所以我倾向于使用动态插入的工作表，并且只在那个工作表上进行操作。

【讨论】：