javascript - 插入 <style> 标签后不会立即应用样式

Question

我有一个 3 步过程:

1. 将小部件的 HTML 插入到页面中。
2. 将小部件的样式插入到页面中。
3. 从一些元素中读取一些 CSS 属性，并根据值设置一些其他属性。

一切正常。除了在第 3 步的一些极少数情况下，样式(在第 2 步插入)可能尚未应用。这通常发生在加载大量内容并与我的代码并行在页面上初始化时。

我无法提取一个简单的重现示例(代码库非常非常复杂)。

我的问题是:是否保证在插入样式后立即应用它们？如果没有，是否有任何 API 允许我在应用样式后运行一些代码？

我在网上找不到任何相关信息。因此，如果有人可以指导我了解有关该主题的任何内容，我将不胜感激。

---

样式插入看起来像这样:

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

Answer 1

好像<style>直到每 <link rel="stylesheet" /> 才应用内容在加载 DOM 之前。

它可能以这种方式工作，因为样式是依赖的并且依赖于顺序(如果有多个规则具有相同的选择器)。据此 - 浏览器开发人员可以按照他们在 DOM 中的顺序执行样式。

在添加样式标签之前尝试等待:

• 直到 window.load事件(用于测试)

• 直到加载所有样式表(在生产中以减少延迟)，如此处 How to determine if CSS has been loaded?

附言我还没有测试过