注意:我在我的问题中保留了书签的最新版本,它运行良好并且基于 Jacob 的回答。如果您正在寻找要使用的书签,请使用该书签。如果您只想要一些可在 chrome 上运行的惊人内容,请参阅 leosok 的精彩回答。
我希望能够使用 JavaScript 书签反转页面上所有元素的颜色。我知道要反转颜色,您需要从 255(xFF) 中减去每个 RGB 十六进制值,但除此之外我不确定如何进行。
我怎样才能做到这一点?
使用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('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);
现在适用于我尝试过的大多数网站。然而,背景图像可能会造成问题。

