Question

我正在浏览jQuery ready事件并找到以下内容：

传递给.ready()的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

我想这意味着如果我在运行jQuery代码后设置任何CSS属性，它的值将不会反映在jQuery代码中。但是，代码正确提取值。我错过了什么吗？这是我的代码：

<head>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    $(document).ready(function() {
      var theColor = $('p').css('color');
      $('p').text(theColor);
    });
  </script>
</head>
<body>
  <p>Some Text!</p>
  <style>
    p{ color: rgb(29,65,92); }
  </style>
</body>

根据我的理解，在这种情况下，文本不应该更改为rgb(29,65,92)，但确实如此。这里的解释是什么？

编辑：如果代码返回正确的值，因为它已准备就绪，那么以下语句的含义是什么？

使用依赖CSS样式属性值的脚本时，引用外部样式表或嵌入样式很重要在引用脚本之前的元素。

Answer 1

您的脚本和CSS都是文档的内部（即不外部），因此DOMContentLoaded警告不适用。

jQuery文档指出的是如果你有依赖计算 CSS值的外部脚本，那么这些值不能保证在当时可用DOMContentLoaded发生火灾。相反，您需要为load添加处理程序。

Answer 2

当我在Safari，opera和IE中运行代码时，您的代码不会返回rgb(29,65,92)。这三个浏览器在HTML中定义的Some Text!显示<p>。他们忽略了你的jQuery代码。它在Chrome和Firefox中运行良好。因此，我认为在大多数情况下，您编写style和script的顺序对于您的网页在浏览器中保持一致非常重要。

使用依赖CSS样式属性值的脚本时，引用外部样式表或嵌入样式很重要在引用脚本之前的元素。

这可能意味着it might work if you dont do this, but it is important to do this可能考虑跨浏览器兼容性

为什么下面的代码返回颜色值？

2 个答案: