Примечание: я держу в своем вопросе актуальную версию букмарклета, которая хорошо работает и основана на ответе Джейкоба. Если вы ищете букмарклет для использования, используйте его. См. Фантастический ответ leosok, если вы просто хотите что-то удивительное, что работает на Chrome.
Я хочу иметь возможность инвертировать цвет всех элементов на странице с помощью букмарклета JavaScript. Я знаю, что для инвертирования цвета вы вычитаете каждое из шестнадцатеричных значений RGB из 255 (xFF), но кроме этого я не уверен, как поступить.
Как мне это сделать?
Использование jQuery приемлемо, и оно должно работать только в Chrome, хотя, если бы оно работало в Firefox, это было бы плюсом.
Это исключая изображения - цвета фона, текста и ссылок должны быть инвертированы. В основном все, что получает свой цвет от CSS.
UPDATE
Вот обновленный букмарклет, который исправляет проблему вложенных элементов и будет работать на многих сайтах (включая этот)
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);
Теперь работает с большинством сайтов, которые я пробовал. Однако фоновые изображения могут создавать проблемы.