如何切换过滤器？

我需要一个功能，将我的网页变成倒置的黑色和白色。当我再次运行该函数时，它应该将其返回到原来的颜色。

这是我到目前为止有：

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

如何切换过滤器？

回答

相关问题