Javascript jQuery颜色替换有时工作，有时不工作

我有一个小网页，你可以在这里找到：

使用CMS，用户可以替换“主题颜色”。因此，一个小脚本用十六进制代码#16a085替换每种颜色，不管是背景色、

边框底色

还是其他颜色。这就是代码：

$(function(){
        $('html').addClass('notransition');
        function colorReplace(findHexColor, replaceWith) {
          // Convert rgb color strings to hex
          function rgb2hex(rgb) {
            if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            function hex(x) {
              return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
          }

          // Select and run a map function on every tag
          $('*').map(function(i, el) {
            // Get the computed styles of each tag
            var styles = window.getComputedStyle(el);

            // Go through each computed style and search for "color"
            Object.keys(styles).reduce(function(acc, k) {
              var name = styles[k];
              var value = styles.getPropertyValue(name);
              if (value !== null && name.indexOf("color") >= 0) {
                // Convert the rgb color to hex and compare with the target color
                if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
                  // Replace the color on this found color attribute
                  $(el).css(name, replaceWith);
                }
              }
            });
          });
        }
        // Call like this for each color attribute you want to replace
        colorReplace("#16a085", "#456780");
});

问题是，有时它能起作用，但有时却不行。

---

你可以访问我上面提到的网站。如果不是蓝色，只需重新加载几次，直到看到蓝色为止。

我觉得这是个时间问题

当我打开chrome开发工具时，我始终看到绿色屏幕，当我关闭它时，我看到蓝色屏幕

如果我在脚本顶部放置一个断点，在脚本顶部放置一个

$（function（）

），并且一旦加载了CSS并继续，它将再次按预期工作

因此，为了解决您的问题，您应该只在解析样式表后运行

colorReplace（#16a085“，“#456780”）

编辑：

根据简单地将样式表放在javascript之上的做法，可能会对您有所帮助

根据HTML5，DOMContentLoaded是一个简单的DOM就绪事件，不考虑样式表。但是，HTML5解析算法要求浏览器推迟脚本的执行，直到加载所有以前的样式表。让我们回到testcase#2中的示例：

当HTML5解析器遇到…标记时，整个解析过程暂停。首先，浏览器获取脚本资源，因为它是一个外部脚本。其次，浏览器等待前面的样式表加载。第三，JavaScript引擎运行下载的脚本代码。最后，解析器继续解析HTML文档

编辑2

这个答案似乎证实了我第一次编辑时的解决方案：

---

对我来说，这似乎是个时间问题

当我打开chrome开发工具时，我始终看到绿色屏幕，当我关闭它时，我看到蓝色屏幕

如果我在脚本顶部放置一个断点，在脚本顶部放置一个

$（function（）

），并且一旦加载了CSS并继续，它将再次按预期工作

因此，为了解决您的问题，您应该只在解析样式表后运行

colorReplace（#16a085“，“#456780”）

编辑：

根据简单地将样式表放在javascript之上的做法，可能会对您有所帮助

根据HTML5，DOMContentLoaded是一个简单的DOM就绪事件，不考虑样式表。但是，HTML5解析算法要求浏览器推迟脚本的执行，直到加载所有以前的样式表。让我们回到testcase#2中的示例：

当HTML5解析器遇到…标记时，整个解析过程暂停。首先，浏览器获取脚本资源，因为它是一个外部脚本。其次，浏览器等待前面的样式表加载。第三，JavaScript引擎运行下载的脚本代码。最后，解析器继续解析HTML文档

编辑2

这个答案似乎证实了我第一次编辑时的解决方案：

？

您遇到了网络（页面加载）问题。请使用选项卡网络上的（Firefox）开发者工具栏查看您的网站加载

在那里，您可以看到以下巧合：

蓝线显示文档触发事件的时间点，即加载页面的全部内容。（）这称为DOMContentLoaded事件。 如链接页面中所述：

DOMContentLoaded事件在[…]文档完全加载和解析后触发，而不等待样式表[…]完成加载

因此，这意味着，如果样式表及时完成，您提供的函数可以覆盖颜色。如果没有，函数甚至找不到相应的颜色代码，因为它们还没有出现。非常简单

这反过来意味着，在函数调用之前，您应该等待样式表加载。从，即使是

$（document）.ready（）

，也可能不够，相反，您必须使用

$（window）.on（“加载”，function（）{…}）

保护一切准备就绪。要了解加载事件的线索，它在网络监视器中标记为红线

如果出于任何原因，这不适合您，您当然可以将您的颜色样式作为样式标记从.css文件移动到html文档中。然后，我猜，它将在DOMContentLoaded上可用。

您遇到了网络（页面加载）问题。请使用（Firefox）查看您的网站加载选项卡网络上的开发者工具栏

在那里，您可以看到以下巧合：

蓝线显示文档触发事件的时间点，即加载页面的全部内容。（）这称为DOMContentLoaded事件。 如链接页面中所述：

DOMContentLoaded事件在[…]文档完全加载和解析后触发，而不等待样式表[…]完成加载

因此，这意味着，如果样式表及时完成，您提供的函数可以覆盖颜色。如果没有，函数甚至找不到相应的颜色代码，因为它们还没有出现。非常简单

这反过来意味着，在函数调用之前，您应该等待样式表加载。从，甚至

$（document）.ready（）

可能还不够，相反，您必须使用

$（window）.on（“load”，function（）{…}）

来保护