JavaScript: инвертировать цвет всех элементов страницы ⇐ Jquery

[Anonymous]

Примечание. В моем вопросе я храню актуальную версию букмарклета, которая работает хорошо и основана на ответе Джейкоба. Если вы ищете букмарклет, используйте его. Посмотрите фантастический ответ Леосока, если вам просто нужно что-то удивительное, работающее на Chrome.

Я хочу иметь возможность инвертировать цвет всех элементов на странице с помощью букмарклета JavaScript. Я знаю, что для инвертирования цвета необходимо вычитать каждое из шестнадцатеричных значений RGB из 255(xFF), но я не знаю, как действовать дальше.

Как это сделать?

Использование jQuery допустимо, и оно должно работать только в Chrome, хотя, если бы оно работало в Firefox, это было бы плюсом.

Это исключает изображения - цвета фона, текста и ссылок должны быть инвертированы. По сути, все, что получает цвет от CSS.

ОБНОВЛЕНИЕ
Вот обновленный букмарклет, который устраняет проблему с вложенными элементами и будет работать на множестве разных сайтов (включая этот).

ОБНОВЛЕНИЕ2
Добавлена ​​некоторая поддержка прозрачности, обработка элементов, которые имеют цвет фона по умолчанию 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);

Теперь работает с большинством сайтов, которые я пробовал. Однако фоновые изображения могут создать проблемы.

Подробнее здесь: https://stackoverflow.com/questions/476 ... -of-a-page