javascript - 使用 JavaScript 更新站点中特定颜色的所有实例

Question

我经常收到将网站上所有颜色实例更新为不同颜色的请求

例如:

在整个网站上，对于当前 #51284F 的任何元素(文本、按钮等)，请将颜色更新为 #4F9CEC

当然，这通常是通过样式表中的 CSS 来完成的。但是，这是一个拥有数百个页面的非常大的网站，我们不确定哪些元素当前设置为 #51284F，以及哪些页面可能包含设置为 #51284F 的元素。此外，此请求经常出现，因此有一种有效的方法可以同时更改所有颜色，而不是手动遍历每个页面并为每个需要颜色更新的元素编写 CSS，这将很有帮助。

那么，有没有办法使用 JavaScript 在整个网站中搜索当前设置为 #51284F 的任何元素并将其颜色更新为 #4F9CEC？

HTML 看起来像这样:

<div class="header-default" data-widget-name="header-default" data-widget-id="template-header1">
    <ul class="tels">
        <li class="tel phone1 collapsed-show" data-click-to-call="Sales">
            <span class="type">Sales</span>
            <span class="separator">:</span>                                    
            <span class="value">123-456-7890</span>
        </li>
        <li class="tel phone2 " data-click-to-call="Service/Parts">
            <span class="type">Service/Parts</span>
            <span class="separator">:</span>
            <span class="value">123-456-7890</span>
        </li>
        <li class="tel phone3 " data-click-to-call="Body Shop">
            <span class="type">Body Shop</span>
            <span class="separator">:</span>    
            <span class="value">123-456-7890</span>
        </li>
        <li class="tel phone4 " data-click-to-call="Local">
            <span class="type">Local</span>
            <span class="separator">:</span>                            
            <span class="value">123-456-7890</span>
        </li>
    </ul>
</div>

CSS 看起来像这样:

.header-default .tels { color: #51284F; }

很遗憾，这些是模板站点，因此我们不会逐个站点地编辑 HTML。 HTML 本身是从网站所在的特定模板中提取的

非常感谢!

Answer 1

也许是这样的？..我不确定没有语法错误。不过你可以试试

$('*').filter(function () {
     var selectColor = 'rgb(0,0,0)';
     return ($(this).css('color') == selectColor);
}).css('color', "some new color");