it-swarm.com.de

JavaScript: Farbe aller Elemente einer Seite umkehren

Hinweis: Ich verwende in meiner Frage eine aktuelle Version des Bookmarklets, die gut funktioniert und auf Jakobs Antwort basiert. Wenn Sie nach einem Bookmarklet suchen, verwenden Sie dieses. Sehen Sie sich Leosoks fantastische Antwort an, wenn Sie einfach etwas Erstaunliches wollen, das auf Chrom funktioniert.

Ich möchte in der Lage sein, die Farbe aller Elemente auf einer Seite mit einem JavaScript-Bookmarklet umzukehren. Ich weiß, dass Sie zum Invertieren einer Farbe jeden RGB-Hex-Wert von 255 (xFF) subtrahieren, aber darüber hinaus bin ich nicht sicher, wie Sie vorgehen sollen.

Wie kann ich das erreichen?

Die Verwendung von jQuery ist akzeptabel und muss nur in Chrome ausgeführt werden, auch wenn dies in Firefox funktioniert, wäre dies ein Plus.

Dies gilt nicht für Bilder - Hintergrund-, Text- und Verknüpfungsfarben sollten alle invertiert sein. Grundsätzlich alles, was seine Farbe von CSS bekommt.

UPDATE Hier ist ein aktualisiertes Bookmarklet, das das Problem des verschachtelten Elements behebt und auf vielen verschiedenen Websites (einschließlich dieser) funktioniert.

UPDATE2 Unterstützung für Transparenz hinzugefügt, die Elemente behandelt, die standardmäßig eine Hintergrundfarbe (rgba) (0, 0, 0, 0) haben. Weitere Seiten sollten jetzt mit der aktualisierten Seite arbeiten.

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);

Funktioniert jetzt mit den meisten Sites, die ich ausprobiert habe. Hintergrundbilder können jedoch ein Problem darstellen.

43
Muhd

Hallo Kolleginnen und Kollegen!

meine Lösung scheint momentan nur für Chrome zu funktionieren, aber es invertiert alles (einschließlich Bilder und Iframes) wie hier:

enter image description here

Es verwendet auch keine externen Bibliotheken und ist sehr einfach: Hinzufügen von -webkit-filter: invert(100%) zum html- Selector.

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);
}());

Bei mir funktioniert das nur in Chrom. Aber dort wirkt es wie ein Zauber.

Hier ist die Geige: http://jsfiddle.net/nikita_turing/jVKw6/3/ Mit dem Bookmarklet. Wenn jemand eine Idee hat, wie er für Firefox (SVG-Filter?) Funktioniert, machen Sie weiter!

Grüße Leosok

35
leosok

Als erstes sollten Sie sich die fantastische RGBColor-Klasse hier - schnappen.

Hier geht: 

jsFiddle-Beispiel

//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
    }
});

Bildschirmfoto: 

alt text

EDIT: Hier ist ein Bookmarklet, das Sie jetzt in Ihren Browser kopieren und einfügen können ( 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();});
71
Jacob Relkin

Ich habe die Kommentare aus einer der Antworten (von leosok) oben bereinigt, so dass es als Bookmarklet in Chrom funktioniert. Beachten Sie, dass diese Lösung effizienter ist als der derzeitige höchste Punkt. Außerdem funktioniert sie auch, wenn sich die HTML-Datei nach dem Ausführen des Skripts ändert.

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);
}());

Eine Zeile für Bookmarklet. Erstellen Sie ein Lesezeichen, und bearbeiten Sie die URL folgendermaßen: 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); }());

3
Zig Mandel

Die akzeptierte Antwort ist absolut korrekt, mit einem kleinen Fehler. Jedes Mal, wenn Sie die Umkehrung umschalten, wird dem Kopf ein anderes Tag-Tag hinzugefügt. Tun Sie das stattdessen 

  // 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);
  }

Auf diese Weise entfernen Sie einfach das Tag, wenn Sie Ihr Invert rückgängig machen möchten. Funktioniert super!

2
astryk

Ich dachte, es würde Spaß machen, Bilder zu invertieren. Es dauerte nicht lange, um eine passende Javascript-Bibliothek für die Bildbearbeitung zu finden: http://www.pixastic.com/lib/

Sie können die gesamte Bibliothek wahrscheinlich nicht in ein Bookmarklet laden, aber wenn Sie sie selbst hosten, können Sie am Ende des Bookmarklets (nach invertColors) Folgendes hinzufügen:

load_script('http://www.example.com/pixastic.invert.js', function () {$('img').each(function() {try{$(this).pixastic("invert");} catch(e) {}})})

Ich denke, es ist erwähnenswert, dass, wenn Sie eine Seite mit weißem Hintergrund nehmen und diese schwarz machen möchten (oder umgekehrt), etwas einfacher sein könnte.

Ich habe gerade das Bookmarklet von Jacob ausprobiert und mit einer etwas naiveren Version verglichen, die ich in den Google Support-Foren gefunden habe: http://www.google.com/support/forum/p/Chrome/thread?tid= 26affebdd0da12d9 & hl = de

Jacobs Umkehrung scheint weniger häufig zu funktionieren und dauert auf großen Seiten etwas länger. Ich denke, ich werde die naive Version öfter verwenden.

1
i_grok