如何切換過濾器？

我需要一個功能，將我的網頁變成倒置的黑色和白色。當我再次運行該函數時，它應該將其返回到原來的顏色。

這是我到目前爲止有：

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

第一次函數運行，它正常工作，使頁面顛倒黑白。第二次，它正確地返回到正常的屏幕。

但之後它什麼也沒做。將篩選器設置爲'none'似乎可以防止出於某種原因對頁面進行任何進一步的更改。我不知道什麼是正確的方式去做這件事。

來源

2017-07-31 Zesty

而不是添加風格，並使它們都沒有，嘗試使用類寫入CSS。你可以寫你的顏色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

如何切換過濾器？

回答

相關問題