问题标签 [cssom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 加载 CSSOM 后 onreadystatechange == 是否完全触发？
问题很小很简单：
onreadystatechange == complete加载 CSSOM 后会触发吗？
请在您的答案中提及一些权威参考，以便我进行交叉检查。谢谢 ：-）
javascript - 延迟脚本是否在 DOMContentLoaded 事件之前执行？
根据延迟属性MDN 说：
此布尔属性设置为向浏览器指示脚本将在文档被解析之后但在触发 DOMContentLoaded 之前执行。defer 属性只能用于外部脚本。
在DOMContentLoaded MDN 上还说：
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表...
所以在准备好DOMContentLoaded之前被解雇。CSSOM这意味着延迟脚本在准备好之前执行。CSSOM但如果这是真的，则脚本必须无法获得正确的 CSS 属性值，并且不能正确应用 CSS。但这不是真的，我们知道所有延迟脚本都运行良好。
- 那么 MDN 文档在技术上是不正确的吗？
- 在哪里可以找到 DOMContentLoaded 的官方文档？我在https://dom.spec.whatwg.org/中搜索但找不到。
PS：请注意，谷歌说CSSOM 是在执行任何内联 javascript 之前构建的
但谷歌在技术上是不正确的。内联 JavaScript 在 CSSOM 准备好之前执行。从我的测试中，我发现 MDN 是正确的，如果 js 文件（延迟和非延迟）在 CSS 文件（或 js 是内联的）之前下载，那么 js 在 CSSOM 准备好之前执行。所以 js 可能会错误地处理样式。为了避免这种情况，我们需要在所有 js 逻辑之前强制回流。
因此，如果用户访问我们的网站时所有需要的 js 都已缓存并且 CSS 未缓存或 js 在 CSS 之前下载，那么他可能会看到一个错误呈现的页面。为了避免这种情况，我们应该在我们所有网站的 js 文件中添加强制回流。
javascript - JavaScript 执行是否延迟到 CSSOM 构建完成？
自从我阅读/了解 CSSOM 到今天，这个问题的答案对我来说一直很清楚。我似乎无法找到最初的文章，但它通过示例非常清楚地解释了 JavaScript 执行被推迟到 CSSOM 从所有<style>和<link>标签中构建<head>（除了那些不应用的标签之外，基于@media查询）。
或者至少我当时是这么认为的，直到今天我都没有理由怀疑它。
这似乎得到了Google 在 Web Fundamentals / Performance分章中粗体声明的支持：
...浏览器延迟脚本执行和 DOM 构建，直到它完成下载和构建 CSSOM。
但是，在我提供的这个答案下，与另一个 SO 用户就该主题进行了友好的聊天，这一说法受到了严重挑战，他在其中提出了以下建议来证明相反的情况：
好的，让我们确定一下。让我们<style>用
...并test.php挂起几秒钟：
如果我是对的（并且js执行被推迟到 CSSOM 构建完成），页面会在构建 CSSOM 之前和执行之前暂停 10 秒，<script>这将注释掉<link />并允许页面呈现。
如果他是对的，那么 js 会在满足时运行，并且<link />请求永远不会离开，因为它现在是一个评论。
惊喜：
- 页面立即呈现。他是对的！
- 但
<link />请求离开，浏览器选项卡显示加载图标 10 秒。我也对！还是我？我很迷茫，这就是我...
任何人都可以对此有所了解吗？到底是怎么回事？
有关系document.write吗？
它与加载.php文件而不是加载文件有关.css吗？
如果有什么不同，我在 Ubuntu 上的 Chrome 中进行了测试。
我恳请链接一个可靠的（重新）来源或提供一个雄辩的示例/测试来备份您可能考虑提供的任何答案。
html - 对 DOMContentLoaded 事件的误解
从MDN，我知道 DOMContentLoaded 不会等待样式表。
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。
但来自varvy.com和谷歌
一个常见的误解是样式与 domContentLoaded 无关，但根据 W3 HTML5 规范，这是不正确的
domContentLoaded：标记 DOM 准备好并且没有样式表阻塞 JavaScript 执行的点——这意味着我们现在可以（可能）构建渲染树。
domContentLoaded 通常在 DOM 和CSSOM都准备好时进行标记。
那么，哪一个是对的？什么是阻止脚本的样式表？
css - 如何在 CSS 中表达可预测的重复声明模式？
是否有任何优雅（即非冗长）的方式来在样式表中表达以下 CSS 样式？
我知道我可以使用 javascript 中的以下循环以计算方式将上述样式规则添加到 CSSOM：
但如果可能的话，我正在寻找某种简洁的 CSS-native 语法来表达上面的行。
例如。 使用 CSS 自定义属性可以实现一些聪明的事情吗？
请不要使用Less或Sass的解决方案。谢谢。
这是显示绝对定位的::after 伪元素的屏幕截图：
javascript - Chrome：DOMContentLoaded 不等待延迟脚本标签中的 CSSOM？
据我了解，当在位于样式表正下方的脚本标记中使用 defer 时，浏览器会在执行脚本并触发 DOMContentLoaded 之前等待样式表加载（CSSOM）。（有关此的更多信息）
这适用于 Firefox，但不适用于 Chrome，所以我做了一个测试用例，其中一个巨大的 css 文件在延迟的脚本标记之前加载。
带有样式表和延迟脚本的 HTML 文件。
CSS 文件包含引导程序以及设置字体系列的测试类。
JS 文件包含 jQuery 和一个简单的测试脚本。
在 Firefox 中，可以在执行时间解析 CSS，我看到“它有效！” > 见火狐
在 Chrome 中，无法在执行时间解析 CSS，我看到“Times New Roman” > 参见 Chrome
如果您检查开发人员工具，DOMContentLoaded 在 Chrome 和 Firefox 中的触发方式不同。Firefox 会在 CSS 文件加载结束时触发它（这就是测试用例工作的原因），但 Chrome 不会等待 CSS 文件加载。
为什么会这样，谁能解释我如何解决这个问题？
编辑：Chromium 确认此行为是一个错误，请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=792420
css - 是否有 web api 来查找元素的包含块
是否有用于查找包含元素块的 Web API？
这里提到了包含块的官方定义https://www.w3.org/TR/CSS22/visudet.html# contains-block-details 。我希望每个元素包含的块信息都存储在某个地方，并且可以使用一些 web api 进行检索。
javascript - 未捕获的 DOMException：无法从“CSSStyleSheet”读取“规则”属性
在 Code.org 的 App Lab 编辑器中，我们最近开始在 Chrome 64 中看到这个错误：
在这个函数中抛出错误，该函数旨在检测浏览器是否正在使用 CSS 媒体查询，在包含styleSheets[i].cssRules.
该问题已在 Windows、OSX、Ubuntu 和 ChromeOS 上发现；在 Chrome 版本 64.0.3282.167 和 64.0.3282.186 上。然而，我们也发现这个问题并没有发生在完全相同的 Chrome 版本和平台上——而且我们似乎无法在隐身窗口中重现该问题。
这个错误的根本原因是什么？
javascript - 如何获取 HTMLElement 的所有相应样式表？
我想知道如何通过 JavaScript 获取 HTMLElement 的相应样式表对象。由于此逻辑在每个浏览器的 Inspector-Tools 中都以某种方式实现，因此它也应该可以在页面内实现 - 我希望如此。
必须有类似的东西
我阅读了所有关于 CSSOM-API 的文档，但没有找到任何方法。
javascript - 快照网站上的所有 CSS
我正在尝试编写一个在浏览器中运行的工具（在 Javascript 中），并且可以在单个时间点获取网站状态的“快照”。它去除脚本标签，将图像和字体内联到数据 url，并内联 CSS。不过，CSS 部分在某些网站上给我带来了麻烦。
我首先假设 document.styleSheets 有一个页面当前样式的权威列表。似乎只是按顺序选择这些规则并不能让我获得页面上的所有活动样式。
此外，由于跨域内容，document.styleSheets 中的某些工作表似乎无法访问。
有没有办法“走 CSSOM”页面？理想情况下，我无需编写浏览器扩展就可以做到这一点。最终目标是在长时间运行的 e2e 测试失败时提供可检查的快照。谢谢你的帮助！