一句代码实现/去除网站哀悼日黑白效果!
2022-12-02
372
本文为本站原创,未经允许请勿随意转载,谢谢!

昨天教大家了如何关闭B站APP哀悼日变灰部分黑白,除了APP,很多网站的网页也设置了黑白模式,今天就教大家如何用几句简单的JavaScript脚本来取消黑白滤镜。

分析黑白效果是如何实现的

要知道如何去除黑白效果,就要知道如何黑白效果是如何实现的。学过CSS的小伙伴都知道,浏览器渲染的样式一般都是由CSS控制的,那么黑白效果肯定也是通过CSS设置的。

我们可以通过以下两种代码设置元素的色彩。

  1. 设置灰度
    filter: grayscale(1)//参数为0~1的正值,可用百分数和小数表示
  2. 设置饱和度
    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上已经有人做好了一个脚本,而且对其他一些网站做了更细致的适配,正好省的我打包上传脚本了(脚本内容本站不负责,不保证后续其作者不会添加其他恶意内容,这里就不贴链接了,请自行搜索)

前端油猴脚本哀悼日CSSJavaScript知识