javascript - 需要帮助尝试使用 UserScript "automatically"更改网站上的颜色

Question

我正在尝试用一组不同的颜色替换我设置的所有颜色，现在我有它 console.log'ing 我的 UserScript 加载的页面中元素的所有颜色，所以我知道它正在获取颜色正确，但由于某种原因它没有改变颜色!

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

(我知道我正确地“连接到网站”，在我认为这会容易得多之前，我开始手动更改元素颜色)

<小时/>

// ==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)

<小时/>

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

Answer 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('颜色',changeColor).css('背景颜色',changeColor);。似乎 $('*').css({color:changeColor, backgroundColor:changeColor}); 也有效，但我不确定。