getComputedStyle:等待外部样式表？
假设您有一个外部样式表(<link>)，然后是一个<script>。外部样式表是否总是在<script>执行之前应用，以便getComputedStyle始终尊重外部样式表的规则？
还是允许浏览器在应用早期样式表之前运行JavaScript？
示例：
<!doctype html>
<html>
<head>
<link href="/my-stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="foo"></div>
<script>
window.getComputedStyle(document.getElementById('foo')).width
// => "200px" due to stylesheet - is this reliable?
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2015-04-17 23:10:12
简而言之:是的，这是可靠的。
为了证明我创建了以下基于nodejs的测试服务器：
目录：
/testserver.js
/server/index.js
/server/style.jstestserver.js创建一个节点js服务器，并确保每个请求加载时间为2秒：
var express = require('express');
var app = express();
app.listen(8888);
app.use(function(req,res,next){
setTimeout(next, 2000);
});
app.use(express.static('./server'));我的index.html
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv"></div>
<script>
console.log(window.getComputedStyle(document.getElementById('mydiv')).width);
</script>
</body>
</html>我的style.css
#mydiv {
position: absolute;
background: #ff0000;
height: 10px;
width: 100px;
}现在我通过启动服务器并调用http://localhost:8888/index.html来测试它
在Chrome developer工具中，时间线如下所示：
如您所见，index.html文件在style.css之前加载
Javascript控制台按预期输出100px：
由于js-控制台中没有错误，并且唯一的输出是预期的100px，我证明了所讨论的采用是正确的。
编辑:现在我测试了更多的：这可以在Chrome上使用2s，5s和60 =>！此外，我用2s在Firefox、Opera和Safari上测试了它。=>工作！
对不起，我没有IE了。
编辑2:我刚刚做了更多的研究：
我发现的行为是由W3C定义的。加载样式文件在由link-tag或style-tag定义时阻止脚本执行：
HTML解析器或XML解析器的文档上下文中的样式表被称为样式表，如果元素是由该文档的解析器创建的，则该样式表会阻塞脚本，并且该元素要么是一个样式元素，要么是一个外部资源链接，在解析器创建该元素时，该元素的样式表是支持样式处理模型的；元素的样式表是在解析器创建该元素时启用的，元素的样式表就绪标志还没有设置，而且，上次事件循环到达步骤1时，该元素在该文档中，用户代理还没有放弃这个特定的样式表。用户代理可以在任何时候放弃样式表。 注意:如果样式表最终仍然加载，则在样式表加载之前放弃样式表，这意味着脚本可能以不正确的信息进行操作。例如，如果样式表将元素的颜色设置为绿色，但在加载工作表之前执行检查结果样式的脚本，则脚本将发现元素是黑色(或任何默认颜色)，因此可能会做出错误的选择(例如，决定将黑色用作页面其他位置的颜色，而不是绿色)。实现者必须平衡脚本使用错误信息的可能性和在等待缓慢的网络请求完成时不做任何操作的性能影响。
W3C阻塞脚本
正如这文档中定义的那样，在解析过程中，在加载阻塞样式之前，脚本不会执行。
Stack Overflow用户
发布于 2015-04-17 22:47:35
如果要确保加载了外部样式表，则可以使用window load事件，当页面资源(如外部样式表和图像)加载完毕，页面也将有其最终布局时，该事件将触发：
window.addEventListener('load', function() {
window.getComputedStyle(document.getElementById('foo')).width
});您还可以设计一个测试，通过在样式表中添加一个特定和唯一的样式规则来查看样式表是否已经加载，该规则应用于特定的DOM元素(甚至可能是隐藏的)，然后您可以使用getComputedStyle()获得这种样式，并查看它是否与应该的样式匹配。如果是这样，那么样式表已经加载。如果没有，那么样式表还没有加载。但是，如果您仍然需要等到加载之后，窗口load事件才是您想要使用的。
https://stackoverflow.com/questions/29710586
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号