Question

我有一个3个步骤：

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

一切正常。除了在步骤3的少数情况下，样式（在步骤2中插入）可能尚未应用。这通常发生在很多东西加载并在页面上与我的代码并行初始化时。

＆＃xA;＆＃xA;

我无法提取一个简单的复制示例（代码库非常复杂）。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

我在网上找不到任何关于此内容的信息。所以我非常感谢有人可以指导我做任何关于这个问题的事情。

＆＃xA;＆＃xA;

样式插入看起来像这样：

＆＃xA;＆＃xA;

  var style = document.createElement（'style'）;＆＃xA; style.setAttribute（'type'，'text / css'）;＆ #xA; style.appendChild（document.createTextNode（CSS））;＆＃XA; document.getElementsByTagName（ '头'）[0] .appendChild（风格）;＆＃XA;

＆＃ XA;

Answer 1

似乎<style>内容在DOM加载之前的每个<link rel="stylesheet" />都没有应用。

它可能以这种方式工作，因为样式依赖于并依赖于顺序（如果有多个规则使用相同的选择器）。根据这一点 - 浏览器开发人员可以在DOM中按顺序执行样式。

在添加样式标记之前尝试等待：

直到window.load事件（用于测试）
直到加载所有样式表（在生产中减少延迟），例如How to determine if CSS has been loaded?

P.S。我还没有测试过那个

Answer 2

与任何其他依赖项一样，需要获取/解析/绘制CSS文件。很难确切地知道何时下载和使用它。

我认为你的边缘情况是它的下载速度不够快。您是否可以准备好CSS并在主体上使用类来在需要时应用CSS？

插入<style>标记后不会立即应用样式

2 个答案: