フィルタを切り替えるにはどうすればよいですか？

フィルタを正しく切り替えるにはどうすればよいですか？フィルタを切り替えるにはどうすればよいですか？

ページを反転させた白黒にする機能が必要です。私は再び関数を実行すると、元の色に戻す必要があります。

function ToggleAccessibility() { 
    if (!blackAndWhite) { 
     (function() { 
      var body = document.body; 
      body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 invert(100%))'; 
      if (!body.style['filter']) { 
       body.style['-webkit-filter'] = 'grayscale(1) invert(100%)'; 
       body.style['filter'] = 'grayscale(1) invert(100%)'; 
      } 
      blackAndWhite = true; 
     }()); 
    } 
    else { 
     (function() { 
      var body = document.body; 
      body.style['filter'] = 'none'; 
      if (!body.style['filter']) { 
       body.style['-webkit-filter'] = 'none'; 
       body.style['filter'] = 'none'; 
      } 
      blackAndWhite = false; 
     }()); 
    } 
}

機能の初回実行時には、それは正しくページが白黒反転させるために動作します：

は、ここで私がこれまで持っているものです。 2回目は正常に画面を正常に戻します。

しかしそれ以降は何もしません。フィルターを'none'に設定すると、何らかの理由でページがそれ以上変更されないようです。私はこれについて正しい方法があるのか分かりません。

出典

2017-07-31 Zesty

スタイルを追加しないようにする代わりに、クラスを使用してCSSを作成してみてください。 1つのクラスに色のCSSを書いて、それをjavascriptでbodyタグに切り替えることができます。 – Kashyap

.invert { 
    filter: grayscale(1) invert(100%); 
    -webkit-filter: grayscale(1) invert(100%); 
} 

<body class="invert"> <!-- Toggle invert class using javascript -->

出典

2017-07-31 12:26:36 Kashyap

フィルタを切り替えるにはどうすればよいですか？

答えて

関連する問題