更改整个页面上不同元素的颜色答案

【问题标题】：Changing color for different elements on the entire page更改整个页面上不同元素的颜色
【发布时间】：2015-04-29 22:06:01
【问题描述】：

我想在我的页面上有一个颜色切换按钮。因此，通过单击它，确切的颜色将更改为其他颜色。问题是颜色用于背景、边框和字体颜色。有没有办法用 jquery 检测确切的颜色并将其更改为其他颜色？提前致谢。

【问题讨论】：

有没有你以前尝试过的东西，或者至少是我们可以使用的最小 sn-p？
对不起，但我真的认为没有必要放置我的代码。我有一个解决方案，方法是提供类（红色/绿色/蓝色）并通过单击颜色按钮更改我的 css。但是如果有办法在整个页面上定位确切的#color然后改变它，我只是在徘徊？
将代码放在这里是有原因的。它使用户能够看到您迄今为止所做的尝试，并帮助获得所需的效果。我也不是 100% 确定你的问题是什么意思。你是说你想要一个用户可以点击的按钮来改变整个网站主题的风格？

标签： javascript jquery html css colors

【解决方案1】：

这里有一段愚蠢的代码可以改变页面中每个 black 元素的颜色：

var sourceColors = ["black", "#000000", "#000", "rgb(0,0,0)"];
var targetColor = "orange";
var elements = document.querySelectorAll("*");
for (var i = 0 ; i < elements.length ; i++) {
    var e = elements[i];
    if (sourceColors.indexOf(e.style.color)) {
        e.style.color = targetColor;
    }
}

我不确定这是否是你想要的，它不是一个非常快速的方法，但它有效。

【讨论】：

我真的希望你在开玩笑。 ;-)

【解决方案2】：

好吧，你需要猜测一下你想要什么，但因为你想一次性改变特定的东西。我建议您为您知道要更改的元素添加一个类。例如，您可以使用class = "colorChange" 并添加两个按钮。一个按钮将所有内容更改为蓝色，另一个按钮更改为红色。

HTML 按钮：

<button id="blue">BLUE</button>
<button id="red">RED</button>

JS：

$('#blue').on('click', function () {
    $('.colorChange').css({
        'background-color': 'blue',
        'color': 'blue'
    });
});

$('#red').on('click', function () {
    $('.colorChange').css({
        'background-color': 'red',
        'color': 'red'
    });
});

这是一个 lil 演示：JSFIDDLE

要查看当前颜色是什么，您可以执行此操作。 $('.colorChange').css('background-color'); 但这会给你 rbg 代码。（例如，rbg(1, 1, 1)）

【讨论】：