需要帮助尝试使用 UserScript 在网站上“自动”更改颜色答案

【问题标题】：Need help trying to "automatically" change colors on a website with UserScript需要帮助尝试使用 UserScript 在网站上“自动”更改颜色
【发布时间】：2019-01-06 07:47:06
【问题描述】：

我正在尝试用一组不同的颜色替换我设置的所有颜色，现在我有它控制台。记录我的用户脚本加载的页面中元素的所有颜色，所以我知道它正在获取颜色正确，但由于某种原因它没有改变颜色！

帮助弄清楚如何更改颜色，而不必获取每个单独元素的类名并手动更改它，将不胜感激，谢谢！

（而且我知道我“连接到网站”是正确的，我开始手动更改元素颜色，然后才决定这会容易得多）

// ==UserScript==
// @name         My Name Here
// @namespace    http://tampermonkey.net/
// @version      1
// @description  My Description
// @author       iLordOfAviation
// @match        Website I want to change
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==
/' jshint -W097 '/
'use strict';
$(document).ready(function() {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var element = all[i];
        console.log($(element).css('color'));
        if ($(element).css('color') === 'rgb(32, 50, 67)') {
            $(element).css('color', 'rgb(33, 33, 33)')
        } else {
            if ($(element).css('color') === 'rgb(238, 244, 247)') {
                $(element).css('color', 'rgb(250, 250, 250)')
            } else {
                if ($(element).css('color') === 'rgb(65, 99, 118)') {
                    $(element).css('color', 'rgb(211, 47, 47)')
                } else {
                    if ($(element).css('color') === 'rgb(134, 189, 219)') {
                        $(element).css('color', 'rgb(211, 47, 47)')
                    }
                }
            }
        }
    }
});

rgb(32, 50, 67)
rgb(33, 33, 33)
rgb(88, 134, 160)
rgb(33, 33, 33)
rgb(65, 99, 118)
rgb(211, 47, 47)
rgb(255, 255, 255)
rgb(116, 153, 189)
rgb(33, 33, 33)
rgb(32, 50, 67)
rgb(33, 33, 33)
rgb(32, 50, 67)

^ 控制台示例，这只是几个，它正在打印成百上千个元素

【问题讨论】：

举一个确切控制台记录的例子 - 因为你的代码"should work™"
提示：为了避免那样讨厌的缩进，} else { if ... {}} => } else if { ...}
@JaromandaX 我用一些输出示例更新了我的问题
显示一些你认为这应该适用的 HTML ... 看到这个simplified version so colors are obvious
这是一种非常痛苦、脆弱且占用大量 CPU 资源的尝试更改颜色的方法！ 明智的做法是覆盖或创建 CSS 样式。 请参阅 stackoverflow.com/questions/19385698/…。

标签： javascript jquery userscripts tampermonkey

【解决方案1】：

警告：这段代码运行$(element).css('color') 很多次而且速度很慢。你可以这样写：（对于背景颜色和颜色）

function changeColor(index, old) {
    if (old === 'rgb(32, 50, 67)') return 'rgb(33, 33, 33)';
    if (old === 'rgb(238, 244, 247)') return 'rgb(250, 250, 250)';
    // ...
}
$(element).css('color', changeColor);
$(element).css('background-color', changeColor);

不过，如果你有很多颜色，我建议你存储在一个数组中，例如：

var colors = [
    [[32, 50, 67], [33, 33, 33]],
    [[238, 244, 247], [250, 250, 250]]
];
colors = colors.map(function(arr) {
    return ['rgb(' + arr[0].join(', ') + ')', 'rgb(' + arr[1].join(', ') + ')'];
});
function changeColor(index, old) {
    return (colors.find(function(arr) {
        return arr[0] === old;
    }) || ['', old])[1];
}

编辑： 实际上你可以写$('*') 来选择所有元素并像$('*').css('color', changeColor).css('background-color', changeColor); 一样改变一次。似乎$('*').css({color: changeColor, backgroundColor: changeColor}); 也可以，但我不确定。

【讨论】：