Question

我正在尝试将我设置的所有颜色替换为另一组颜色，现在我将其设置为console.log，将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('color', changeColor).css('background-color', changeColor);一样对其进行一次更改。似乎$('*').css({color: changeColor, backgroundColor: changeColor});也可以，但我不确定。

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

1 个答案: