昨天教大家了如何关闭B站APP哀悼日变灰部分黑白，除了APP，很多网站的网页也设置了黑白模式，今天就教大家如何用几句简单的JavaScript脚本来取消黑白滤镜。
分析黑白效果是如何实现的
要知道如何去除黑白效果，就要知道如何黑白效果是如何实现的。学过CSS的小伙伴都知道，浏览器渲染的样式一般都是由CSS控制的，那么黑白效果肯定也是通过CSS设置的。
我们可以通过以下两种代码设置元素的色彩。
- 设置灰度
filter: grayscale(1)//参数为0~1的正值，可用百分数和小数表示 - 设置饱和度
filter: saturate(0)//参数为0~1的正值，可用百分数和小数表示
如何去除黑白效果
既然知道了网站是用这两个属性（中的任意一个）来实现，那想要去除这些属性，就需要找到设置了这些属性的元素。但是由于filter属性与fixed定位同用时fixed定位会失效，大部分网站并不会直接将filter属性加载<body>等标签上，而是加载一些子元素的标签上。而一些网站元素繁多，而且有些是动态生成，难以查找filter属性加在那些元素上，那怎么呢？
我的方案是直接使用通配符选择器*选择所有元素。
那么问题来了，如果想要恢复彩色，如何操作？上面两种CSS属性都可以调节色彩饱和度或者灰度，我们只需要将0改成1，或者将1改成0就行了。
那么代码就是这样：
*{
filter: grayscale(0)!important
}
//*表示匹配所有元素，!important表示覆盖掉原有的属性，即强行使用我们的这条此时问题又来了，如果直接将所有元素加上filter属性，一些使用了fixed定位的元素的浮动效果将会失效，导致页面显示异常（如下图）
为了解决这个头疼的问题，我选择使用个简单粗暴的方法——直接禁用所有元素的filter属性！毕竟相比flixed的使用量，filter小得多，直接禁用的话问题小得多。于是代码就是：
*{
filter: none!important
}脚本实现
当然，我们不可能每打开一个网页就手动打开控制台向<head>的<style>里添加上面那段代码，那么就需要油猴+js脚本来帮我们完成。
废话不多说，代码如下：
var css=document.createElement('style');
css.type='text/css';
document.getElementsByTagName('head')[0].appendChild(css);
css.appendChild(document.createTextNode("*{filter:none!important;}"));
好巧不巧，今天发现greasyfork上已经有人做好了一个脚本，而且对其他一些网站做了更细致的适配，正好省的我打包上传脚本了（脚本内容本站不负责，不保证后续其作者不会添加其他恶意内容，这里就不贴链接了，请自行搜索）
鄂公网安备 42068302000286号