JavaScript：在页面的所有元素上反转颜色 [英] JavaScript: Invert color on all elements of a page
问题描述
注意：我在我的问题中保留了一个最新版本的小书签，这个版本效果很好，并且基于雅各布的回答。如果您正在寻找使用的书签，请使用该书签。如果您希望在Chrome浏览器上显示出惊人的效果，请参阅leosok的精彩回答。
我希望能够用JavaScript书签反转页面上所有元素的颜色。我知道，要倒置颜色，你需要从255（xFF）中减去每个RGB十六进制值，但除此之外，我不确定如何继续。
我怎样才能做到这一点？
使用 jQuery 是可以接受的，它只需要在Chrome上工作，但如果它工作在Firefox将是一个加分。
这是排除图像 - 背景，文本和链接颜色应该全部颠倒。基本上什么都是从CSS获取它的颜色。
更新
这是一个更新的小书签，它修复了嵌套元素问题，在许多不同的网站上（包括这一个）
UPDATE2
增加了对透明度的支持，处理具有默认背景的元素-color 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（'头'）[0] .appendChild（s）;
}
函数invertElement（）{
var colorProperties = ['color'，'background-color'];
var color = null;
for（var color属性）{
prop = colorProperties [prop];
if（！$（this）.css（prop））continue; （$（this）.data（prop）！= $（this）.css（prop））继续;
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;
函数setColorData（）{
var colorProperties = ['color'，'background-color'];
for（var color in colorProperties）{
prop = colorProperties [prop];
$（this）.data（prop，$（this）.css（prop））;
函数invertColors（）{
$（document）.live（'DOMNodeInserted'，函数（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）;
现在可以与我尝试过的大多数网站一起使用。但是，背景图片可能会带来问题。
您好同事逆变器！
我的解决方案似乎现在只适用于Chrome浏览器，但它会将所有内容（包括图片和iframe）颠倒过来： //i.stack.imgur.com/CR8XX.jpgalt =在这里输入图片描述>
另外它不使用外部库，而且非常简单：向 html - 选择器添加 -webkit-filter：invert（100％）。
javascript：（
function（）{
//我们要注入的css
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'）;
//一个黑客，所以你可以倒退点击t他再次书签
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））;
}
//将css注入到头部
head.appendChild（style）;
}（））;
对我而言，这只适用于chrome。但它的功能就像一个魅力。
这里是小提琴： http://jsfiddle.net/nikita_turing/jVKw6/3/
包括Bookmarklet。如果有人有一个想法如何使它适用于Firefox（SVG过滤器？），继续前进！
欢迎
leosok
Note: I am keeping an up-to-date version of the bookmarklet in my question which works well and is based on Jacob's answer. If you are looking for a bookmarklet to use, use that one. See leosok's fantastic answer if you just want something amazing that works on chrome.
I want to be able to invert the color of all the elements on a page with a JavaScript bookmarklet. I know that to invert a color you subtract each of the RGB hex values from 255(xFF), but beyond that I am unsure of how to proceed.
How can I accomplish this?
Using jQuery is acceptable, and it only needs to work on Chrome, although if it worked in Firefox that'd be a plus.
This is excluding images - background, text and links colors should all be inverted. Basically anything that gets its color from CSS.
UPDATE Here is an updated bookmarklet that fixes the nested element issue and will work on a lot of different sites (including this one)
UPDATE2 Added some support for transparency, handling elements that have default background-color rgba(0, 0, 0, 0). More sites should be working now with the updated one.
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);
Now works with most sites I've tried. Background images can pose a problem, however.
Hello fellow inverters!
my solution seems to work only for chrome right now, but it inverts everything (including images and iframes) as seen here:
Also it does not make use of external libraries and is very simple: adding a -webkit-filter: invert(100%) to the html-selector.
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);
}());
For me, this only works in chrome. But there it works like a charm.
Here's the fiddle: http://jsfiddle.net/nikita_turing/jVKw6/3/ With the Bookmarklet included. If someone has an Idea how to make it work for Firefox (SVG-Filters?) go ahead!
Greets leosok
这篇关于JavaScript：在页面的所有元素上反转颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
