web-dev-qa-db-ja.com

JavaScript：ページのすべての要素の色を反転する

注：ジェイコブの回答に基づいた、うまく機能するブックマークレットの最新バージョンを質問に保管しています。使用するブックマークレットを探している場合は、それを使用してください。 クロムで動作する素晴らしいものが欲しい場合は、leosokの素晴らしい答えをご覧ください。

JavaScriptブックマークレットを使用して、ページ上のすべての要素の色を反転できるようにします。色を反転するには、各RGB 16進値を255（xFF）から減算することを知っていますが、それを超えて進む方法がわかりません。

どうすればこれを達成できますか？

jQueryを使用しても問題ありません。Chromeでのみ動作する必要がありますが、Firefoxで動作する場合はプラスになります。

これは画像を除外しています-背景、テキスト、リンクの色はすべて逆にする必要があります。基本的にCSSから色を取得するもの。

[〜＃〜] update [〜＃〜]これは、ネストされた要素の問題を修正し、多くの異なるサイト（このサイトを含む）で機能する更新されたブックマークレットです。

PDATE2デフォルトの背景色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);

現在、私が試したほとんどのサイトで動作します。ただし、背景画像は問題を引き起こす可能性があります。

javascriptjquerygoogle-chromebookmarklet
43
Muhd

こんにちは、仲間のインバーター！

私の解決策はchromeでのみ動作するようですが、ここに見られるようにすべて（画像とiframeを含む）を反転します：

enter image description here

また、外部ライブラリを使用せず、非常に簡単です：-webkit-filter: invert(100%)を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);
}());

私にとって、これはクロムでのみ動作します。しかし、それは魅力のように機能します。

フィドルは次のとおりです。 http://jsfiddle.net/nikita_turing/jVKw6/3/ ブックマークレットが含まれています。誰かがFirefox（SVG-Filters？）で動作させるためのアイデアを持っているなら、先に進んでください！

あいさつ

36
leosok

まず最初に、素晴らしいRGBColorクラスを取得します here 。

ここにあります：

jsFiddleの例

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

スクリーンショット：

alt text

[〜＃〜] edit [〜＃〜]：これは、ブラウザにコピーアンドペーストできるブックマークレットです（ 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

上記の回答（レオソーク）の1つからコメントをクリーンアップしたので、クロムのブックマークレットとして機能します。このソリューションは、ここでの現在の最高点よりも効率的であることに注意してください。さらに、スクリプトの実行後にhtmlが変更されても機能します。

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

ブックマークレット用の1行。ブックマークを作成し、次のURLを編集します：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

受け入れられた答えは完全に正しいもので、1つの小さな欠陥があります。反転を切り替えるたびに、ANOTHERスタイルのタグが頭に追加されます。代わりにこれを行う

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

反転を元に戻す場合は、この方法でタグを削除するだけです。よく働く！

2
astryk

画像を反転させてみると楽しいと思いました。画像編集に適したJavascriptライブラリを見つけるのに時間がかかりませんでした： http://www.pixastic.com/lib/

ライブラリ全体をブックマークレットにロードすることはおそらくできないでしょうが、自分でホストする場合は、ブックマークレットの最後に（invertColorsの後に）次のようなものを追加できます。

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

もしあなたの目標が白い背景のページを取り、それを黒にする（またはその逆）ことであるなら、もっと簡単なものが整然としているかもしれないことに注意する価値があると思います。

Jacobのブックマークレットを試し、Googleサポートフォーラムで見つけたより素朴なバージョンと比較しました： http://www.google.com/support/forum/p/Chrome/thread?tid=26affebdd0da12d9&hl = en

ジェイコブの反転はあまり頻繁に動作しないようで、大きなページではかなり長くかかります。最終的には、単純なバージョンをより頻繁に使用することになります。

1
i_grok