关于 jquery:JavaScript：反转页面所有元素的颜色


JavaScript: Invert color on all elements of a page

注意：我在我的问题中保留了书签的最新版本，它运行良好并且基于 Jacob 的回答。如果您正在寻找要使用的书签，请使用那个。 如果您只想要一些可在 chrome 上运行的令人惊奇的东西，请参阅 leosok 的精彩回答。

我希望能够使用 JavaScript 书签反转页面上所有元素的颜色。我知道要反转颜色，您需要从 255(xFF) 中减去每个 RGB 十六进制值，但除此之外我不确定如何进行。

我怎样才能做到这一点？

使用 jQuery 是可以接受的，它只需要在 Chrome 上运行，但如果它在 Firefox 中运行那就更好了。

这不包括图像 - 背景、文本和链接颜色都应该反转。基本上任何从 CSS 获取颜色的东西。

更新
这是一个更新的书签，它修复了嵌套元素问题，并将在许多不同的站点(包括这个站点)上运行

更新2
添加了对透明度的一些支持，处理具有默认背景颜色 rgba(0, 0, 0, 0) 的元素。现在应该有更多网站使用更新后的网站。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
javascript: (function ($) {
    function load_script(src, callback) {
        var s = document.createElement('script');
        s.src = src;
        s.onload = callback;
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    function invertElement() {
        var colorProperties = ['color', 'background-color'];
        var color = null;
        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            if (!$(this).css(prop)) continue;
            if ($(this).data(prop) != $(this).css(prop)) continue;

            if (($(this).css(prop) === 'rgba(0, 0, 0, 0)') || ($(this).css(prop) === 'transparent')) {
                if ($(this).is('body')) {
                    $(this).css(prop, 'black');
                    continue;
                } else {
                    continue;
                }
            }
            color = new RGBColor($(this).css(prop));
            if (color.ok) {
                $(this).css(prop, 'rgb(' + (255 - color.r) + ',' + (255 - color.g) + ',' + (255 - color.b) + ')');
            }
            color = null;
        }
    }

    function setColorData() {
        var colorProperties = ['color', 'background-color'];
        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            $(this).data(prop, $(this).css(prop));
        }
    }

    function invertColors() {
        $(document).live('DOMNodeInserted', function(e) {
            var $toInvert = $(e.target).find('*').andSelf();
            $toInvert.each(setColorData);
            $toInvert.each(invertElement);
        });
        $('*').each(setColorData);
        $('*').each(invertElement);
        $('iframe').each(function () {
            $(this).contents().find('*').each(setColorData);
            $(this).contents().find('*').each(invertElement);
        });
    }
    load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js', function () {
        if (!window.jQuery) load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', invertColors);
        else invertColors();
    });

})(jQuery);

现在适用于我尝试过的大多数网站。然而，背景图像可能会造成问题。

相关讨论

首先，在这里获取很棒的 RGBColor 课程。

这里是：

jsFiddle 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//set up color properties to iterate through
var colorProperties = ['color', 'background-color'];

//iterate through every element in reverse order...
$("*").get().reverse().each(function() {
    var color = null;

    for (var prop in colorProperties) {
        prop = colorProperties[prop];

        //if we can't find this property or it's null, continue
        if (!$(this).css(prop)) continue;

        //create RGBColor object
        color = new RGBColor($(this).css(prop));

        if (color.ok) {
            //good to go, let's build up this RGB baby!
            //subtract each color component from 255
            $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.b) + ')');
        }
        color = null; //some cleanup
    }
});

截图：

alt

1
javascript:function load_script(src,callback){var s=document.createElement('script');s.src=src;s.onload=callback;document.getElementsByTagName('head')[0].appendChild(s);}function invertColors(){var colorProperties=['color','background-color'];$('*').each(function(){var color=null;for(var prop in colorProperties){prop=colorProperties[prop];if(!$(this).css(prop))continue;color=new RGBColor($(this).css(prop));if(color.ok){$(this).css(prop,'rgb('+(255-color.r)+','+(255-color.g)+','+(255-color.b)+')');}color=null;}});}load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js',function(){if(!window.jQuery)load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',invertColors);else invertColors();});
相关讨论

n

相关讨论

n

相关讨论

n

相关讨论

我认为尝试反转图像会很有趣。没多久就找到了一个合适的 Javascript 库来进行图像编辑：http://www.pixastic.com/lib/

您可能无法将整个库加载到书签中，但是如果您自己托管它，您可以在书签的末尾添加类似的内容(在 invertColors 之后)：

1
load_script('http://www.example.com/pixastic.invert.js', function () {$('img').each(function() {try{$(this).pixastic("invert");} catch(e) {}})})

我认为值得注意的是，如果您的目标是将白色背景的页面设为黑色(反之亦然)，则可能需要更简单的方法。

我刚刚尝试了 Jacob 提供的书签，并将其与我在 Google 支持论坛上找到的更简单的版本进行了比较：
http://www.google.com/support/forum/p/Chrome/thread?tid=26affebdd0da12d9

相关讨论