JavaScript：在页面的所有元素上反转颜色

注意：我在我的问题中保留了一个最新版本的书签，这个版本运行良好，基于雅各布的回答。 如果您正在寻找一个小书签来使用，使用那个。 如果你只是想要一些奇妙的东西在铬上工作，请参阅leosok的梦幻般的答案。

我希望能够通过JavaScript书签来反转页面上所有元素的颜色。 我知道要倒置颜色，你可以从255（xFF）中减去每个RGBhex值，但除此之外，我不确定如何继续。

我怎样才能做到这一点？

使用jQuery是可以接受的，它只需要在Chrome上工作，但如果它在Firefox中工作，那将是一个加号。

这是排除图像 – 背景，文字和链接的颜色都应该倒置。 基本上任何从CSS获取其颜色的东西。

更新这里是一个更新的小书签，修复了嵌套的元素问题，并将工作在许多不同的网站（包括这一个）

UPDATE2增加了对透明度的支持，处理具有默认背景颜色rgba（ 0,0,0,0）的元素。 更多的网站现在应该与更新的工作。

 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('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); 

现在与我尝试过的大多数网站一起工作。 但是，背景图像可能会造成问题。

Answer 1

你好，逆变器！

我的解决scheme似乎现在只适用于chrome，但是它将所有内容（包括图像和iframe）都倒过来，如下所示：

此外它不使用外部库，非常简单：添加-webkit-filter: invert(100%)到htmlselect器。

 javascript: ( function () { // the css we are going to inject var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); // a hack, so you can "invert back" clicking the bookmarklet again if (!window.counter) { window.counter = 1;} else { window.counter ++; if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'} }; style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } //injecting the css to the head head.appendChild(style); }()); 

对我来说，这只适用于铬。 但是它的作用就像一个魅力。

这里是小提琴： http : //jsfiddle.net/nikita_turing/jVKw6/3/包括书签。 如果有人有一个想法如何使其工作在Firefox（SVGfilter？）继续前进！

问候leosok

Answer 2

首先，在这里抓住真棒的RGBColor类。

开始：

jsFiddle的例子

 //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 } }); 

截图：

编辑 ：这是一个书签，你现在可以复制粘贴到你的浏览器（ http://jsfiddle.net/F7HqS/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('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();}); 

Answer 3

我清理了上面的一个答案（通过leosok）的评论，所以它将作为一个书签在铬。 请注意，这个解决scheme比当前的最高点效率更高，加上它即使在你运行脚本后html改变了。

 javascript:(function () { var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }'; var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); if (!window.counter) { window.counter = 1; } else { window.counter++; if (window.counter % 2 == 0) { var css = 'html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }' } } style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); }()); 

一个小书签线。 创build一个书签，然后编辑这个url： javascript:(function () { var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }'; var head = document.getElementsByTagName('head')[0]; var style = document.createElement('style'); if (!window.counter) { window.counter = 1; } else { window.counter++; if (window.counter % 2 == 0) { var css = 'html {-webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }' } } style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); }());

Answer 4

接受的答案是完全正确的，只有一个小缺陷。 每次切换倒置时，都会向头部添加另一个样式标记。 做这个，而不是

  // the css we are going to inject let css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }'; let head = $('head')[0]; let invertStyle = $('#invert')[0]; if (invertStyle) { head.removeChild(invertStyle); } else { let style = document.createElement('style'); style.type = 'text/css'; style.id = 'invert'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } //injecting the css to the head head.appendChild(style); } 

这样，你只要删除标签，如果你想撤消你的反转。 太棒了！

Answer 5

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

您可能无法将整个库加载到小书签中，但是如果您自己托pipe，则可以在小书签的末尾添加如下内容（在invertColors之后）：

 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& hl= zh- CN

雅各布的翻译似乎不太经常，而且在大页面上花费的时间也相当长。 我想我会更频繁地使用天真的版本。