Note : Je conserve une version actualisée 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-là. 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 d'une page avec un bookmarklet JavaScript. Je sais que pour inverser une couleur, il faut soustraire chacune des valeurs hexagonales RVB de 255(xFF), mais au-delà, je ne sais pas comment procéder.
Comment puis-je y parvenir ?
Utilisation de jQuery est acceptable, et il ne doit fonctionner que sur Chrome, mais s'il fonctionnait sur Firefox, ce serait un plus.
Ceci exclut les images - les couleurs de l'arrière-plan, du texte et des liens doivent toutes être inversées. En gros, tout ce qui tire sa couleur de CSS.
UPDATE Voici un bookmarklet mis à jour qui corrige le problème des éléments imbriqués et qui fonctionnera sur de nombreux sites différents (dont celui-ci).
UPDATE2 Ajout d'une prise en charge de la transparence, pour les éléments dont la couleur de fond par défaut est rgba(0, 0, 0, 0). Plus de sites devraient fonctionner maintenant avec la mise à 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);Maintenant, il fonctionne avec la plupart des sites que j'ai essayés. Les images d'arrière-plan peuvent toutefois poser un problème.
0 votes
Apparemment, il n'est pas possible de mettre des commentaires en ligne dans un bookmarklet car ils sont convertis en une seule ligne.
0 votes
J'ai supprimé le commentaire qui cassait le bookmarklet, et maintenant il suffit de faire
$('*')pour la sélection de tous les éléments de sorte qu'il inclut maintenant l'élément<html>(qui peut apparemment avoir une couleur de fond).0 votes
Il est préférable d'écrire un auto-réponse que de continuer à éditer le message original comme ça. Je me rends compte que c'est un wiki communautaire maintenant, mais cela fait toujours un fil de discussion maladroit pour obtenir des informations - les réponses devraient aller dans le champ "réponses" afin qu'elles puissent être votées et évaluées sur leurs propres mérites.