JavaScript: Invert color sur tous les éléments d'une page
Note: je tiens à jour une version du bookmarklet dans ma question qui fonctionne bien et qui est basée sur la réponse de Jacob. Si vous cherchez un bookmarklet à utiliser, Utilisez celui-ci. voir la réponse fantastique de leosok si vous voulez juste quelque chose d'étonnant qui fonctionne sur chrome.
je veux pouvoir inverser la couleur de tous les éléments sur une page avec un bookmarklet JavaScript. Je sais que pour inverser une couleur on soustrait chacun des hexagones RVB valeurs de 255 (xFF), mais au-delà de cela, je ne sais pas comment procéder.
Comment puis-je accomplir?
en utilisant jQuery est acceptable, et il a seulement besoin de travailler sur Chrome, même si elle a travaillé dans Firefox, ce serait un plus.
ceci exclut les images-arrière-plan, texte et liens les couleurs devraient toutes être inversées. En gros, tout ce qui tire sa couleur de la CSS.
UPDATE Voici une mise à jour bookmarklet qui corrige les emboîtés élément en question et de travailler sur beaucoup de sites différents (dont celui-ci)
UPDATE2 Ajouté un peu de soutien pour la transparence, la manipulation des éléments qui ont l'arrière-plan par défaut-couleur rgba(0, 0, 0, 0). D'autres sites devraient être mis à jour.
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);
fonctionne maintenant avec la plupart des sites que j'ai essayé. Les images de fond peuvent toutefois poser un problème.
5 réponses
Bonjour chers Inverter!
ma solution ne semble fonctionner que pour chrome en ce moment, mais elle inverse tout (y compris les images et iframes) comme vu ici:
en outre, il ne fait pas usage de bibliothèques externes et est très simple: ajouter un -webkit-filter: invert(100%)html-sélecteur.
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);
}());
pour moi, cela ne fonctionne qu'en chrome. Mais là, il fonctionne comme un charme.
Voici le violon: http://jsfiddle.net/nikita_turing/jVKw6/3/ Avec le Bookmarklet inclus. Si quelqu'un a une idée comment le faire fonctionner pour Firefox (SVG-filtres?) aller de l'avant!
Accueille leosok!--4-->
tout d'Abord, prenez le génial RGBColor classe ici.
va Ici:
jsFiddle exemple
//set up color properties to iterate through
var colorProperties = ['color', 'background-color'];
//iterate through every element in reverse order...
$("*").get().reverse().each(function() {
var color = null;
for (var prop in colorProperties) {
prop = colorProperties[prop];
//if we can't find this property or it's null, continue
if (!$(this).css(prop)) continue;
//create RGBColor object
color = new RGBColor($(this).css(prop));
if (color.ok) {
//good to go, let's build up this RGB baby!
//subtract each color component from 255
$(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color.b) + ')');
}
color = null; //some cleanup
}
});
Capture d'écran:
EDIT: Voici un bookmarklet vous pouvez maintenant copier-coller dans votre navigateur (http://jsfiddle.net/F7HqS/1/)
javascript:function load_script(src,callback){var s=document.createElement('script');s.src=src;s.onload=callback;document.getElementsByTagName('head')[0].appendChild(s);}function invertColors(){var colorProperties=['color','background-color'];$('*').each(function(){var color=null;for(var prop in colorProperties){prop=colorProperties[prop];if(!$(this).css(prop))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;}});}load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js',function(){if(!window.jQuery)load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',invertColors);else invertColors();});
j'ai nettoyé les commentaires de l'une des réponses (par leosok) ci-dessus, de sorte qu'il fonctionne comme un bookmarklet dans google chrome. Notez que cette solution est plus efficace que le point le plus élevé actuel ici, en plus elle fonctionne même si le html change après que vous ayez lancé le script.
javascript:(function () {
var css = 'html {-webkit-filter: invert(100%);' + '-moz-filter: invert(100%);' + '-o-filter: invert(100%);' + '-ms-filter: invert(100%); }';
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
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));
}
head.appendChild(style);
}());
la réponse acceptée est tout à fait correcte, avec un défaut mineur. Chaque fois que vous basculez l'inverse il ajoute une autre étiquette de style à la tête. Faire cela à la place
// the css we are going to inject
let css = 'html {-webkit-filter: invert(100%);' +
'-moz-filter: invert(100%);' +
'-o-filter: invert(100%);' +
'-ms-filter: invert(100%); }';
let head = $('head')[0];
let invertStyle = $('#invert')[0];
if (invertStyle) {
head.removeChild(invertStyle);
} else {
let style = document.createElement('style');
style.type = 'text/css';
style.id = 'invert';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
//injecting the css to the head
head.appendChild(style);
}
de cette façon, vous retirez simplement l'étiquette si vous voulez défaire votre invert. Fonctionne très bien!
j'ai pensé qu'il serait amusant d'essayer d'inverser les images. Il n'a pas fallu longtemps pour trouver une bibliothèque Javascript appropriée pour le traitement d'image:http://www.pixastic.com/lib/
Vous ne pouvez probablement pas charger toute cette bibliothèque dans un bookmarklet, mais si vous l'hébergez vous-même, vous pouvez ajouter quelque chose comme ça à la fin du bookmarklet (après invertColors):
load_script('http://www.example.com/pixastic.invert.js', function () {$('img').each(function() {try{$(this).pixastic("invert");} catch(e) {}})})
je pense qu'il est intéressant de noter que si votre objectif est de prendre une page avec un blanc fond et le faire noir (ou vice versa), quelque chose de plus simple pourrait être en ordre.
je viens d'essayer le bookmarklet de Jacob et l'ai comparé à une version plus naïve que j'ai trouvé sur les forums de soutien de Google: http://www.google.com/support/forum/p/Chrome/thread?tid=26affebdd0da12d9&hl=en
l'inverse de Jacob semble fonctionner moins fréquemment et prend un peu plus de temps sur les grandes pages. Je pense que je vais finir par utiliser la version naïve plus souvent.