Примечание. Я сохраняю обновленную версию букмарклета в моем вопросе, который хорошо работает и основан на ответе Якоба. Если вы ищете букмарклет для использования, используйте его. Посмотрите на отличный leosok ответ, если вы просто хотите что-то потрясающее, которое работает на хроме.
Я хочу иметь возможность инвертировать цвет всех элементов на странице с помощью букмарклета 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);
Теперь работает с большинством сайтов, которые я пробовал. Однако фоновые изображения могут создавать проблемы.
