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

【问题标题】：Why is the code below returning a color value?为什么下面的代码返回颜色值？
【发布时间】：2016-02-03 14:13:07
【问题描述】：

我正在通过 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)，但确实如此。这里的解释是什么？

编辑：如果代码返回正确的值是因为它包含在 ready 中，那么下面的语句是什么意思？

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

【问题讨论】：

但是您已经将您的代码包装在.ready 处理程序中！这不是您发布的声明的反例。
什么是“当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要。”那么暗示呢？
这意味着您需要以正确的顺序引用脚本和样式表或延迟脚本的执行直到应用样式（这是.ready所做的在你的例子中）。
你没有正确理解，通过stackoverflow.com/questions/10537039/…和这个stackoverflow.com/questions/1324568/…
@blindProgrammer Nope.

标签： javascript jquery html css

【解决方案1】：

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

jQuery 文档指出的是，如果您有依赖于 computed CSS 值的外部脚本，则不能保证这些值当时可用DOMContentLoaded 着火了。相反，您需要为load 添加一个处理程序。

【讨论】：

因此，这意味着可能会或可能不会应用值。没有完全的保证。
这意味着如果您需要查询 DOM 以获取 CSS 值，请不要依赖 DOMContentLoaded。这在很大程度上取决于浏览器的实现。一些浏览器（Firefox、Chrome）采用更智能的预测解析器，可以在DOMContentLoaded 时间提供计算出的 CSS 值，但重点不是所有浏览器都这样做，所以它不可靠。
说真的，去read the thread that @Anil Kumar already posted。

【解决方案2】：

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

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

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

【讨论】：