00:00
哈喽,同学们大家好,我是大圣啊,今天我们来聊一个面试题,叫做网页一键智挥啊,当然了,网上已经有很多教程了,我们今天要讨论的问题是如何在网页一键制灰的这个前提下呢,保持部分元素的彩色,我们来看一下这个需求啊。啊,我们看一下这个现在的。我做完的一个效果,首先呢,我全部指挥比较简单,我们点击这个全部智挥按钮,它就是所有元素都指灰,然后呢,我们这个我们的坤坤啊,现在也全部都是灰色的。当然了,我们还可以,呃有另外一个效果,就是首屏部分智慧,比如说我们点击它有一个元素是保持彩色的,然后呢,而且是首屏啊,你看我们底下这个坤坤的篮球是彩色,但它的头已经是灰色啊,就是呃这个其实也算是呃完成了我们这个需求,但兼容性有一点点小问题,待会儿我在代码上进行体验,然后还有一个是针对呃元素的一个啊,一个这个保湿彩色点击它。
01:01
啊,就会元素级的,像图片呀,Div啊,还有整个video啊,都可以依然保持彩色,那这个怎么实现呢?我们下面来代码中进行体验,首先我们这边有一个空白的页面。啊,空白的页面,然后现在全部都是,呃,空白的div和这些标签啊,没有左边是没有任何的GS代码的。如果我们想让全部的页面都置灰,直接加上一个质蛋塞塞就可以。把它粘到我们的页面上,Star标签里面。但我现在写的div和CSS都是为了实现这个非常的布局啊,并没有额外的含义,我们刷新一下。知乎就已经实现了,然后如果你对兼容性要求高一点的话,你就可以除了一个filter之外呢,还要加上很多浏览器的前缀,像K呀,像底下像这种支持IE浏览器的,就像我们看一下像百度这种智挥啊,采用的就是我们这种写法啊,写了大概呃六七个吧啊兼容性比较好TOC的产品,那如果你的产品是只针对现代浏览器的,比如知乎,对吧,其实你只写两个。
02:03
Filter和web k的filter也是OK的啊,这两个几个方案大家知道就好,那这样第一步就完成了啊,就一句话或者是一行C代词就解决了这个问题,那么我们的问题是如何在这个智慧的前提下保持部分原色彩色呢?这是一个非趁的面试题,这也是我看到一个推文啊,出了一个题我就尝试做一下,首先呢啊,我们先第一步先把整个这个制灰的过程呢,把它变成可配置的动态,现在是我们要既写CSS也要写GS,我们底下重要代码我们把它copy一下。放在这个SC标签里面,然后把这个叫set GR这个ID呢改成杠二。啊,然后上面呢,我们有三个按钮,分别是all first和。OK,然后中间是一堆Di啊,主要凸显这个嵌套关系。然后最底下还有一个呃,一个video,然后我们这段代码是用JS,然后在网页上新建一个star标签,然后这个star标签里面呢,会有一个点degree filter这个class,然后它里面就是我们所有指挥的这些样式,然后当我们这个按钮在click的时候呢,会执行这个set or GR这个方法,这个方法做的事情就是把我们的root。
03:18
啊,也就是说我们的HTML标签上面会切换这个,这个叫。呃,这个class,然后来实现,我们也可以右键。点这个检查元素,可以看到在我们的HTML啊,我们右脚啊滑一下。我们点一下指挥。可以看到它是切换出了一个叫gra filter这个class来实现啊。然后取消,就把这class删掉就可以了,这是第一种情况,那然后啊,我们就来到我们的面试的主题,如何让这个元素保持部分彩色呢?啊首先其实我们最直观的想法是,比如说我这个页面里面有一个叫叫啊有一个class叫not GR not GR,然后呢,它是一个图片对吧?那我们能不能在这个设置设置这个灰色的前提之下。
04:06
然后在样式里面写一段代码。叫点not agree3,然后filter是闹啊,我们重置一下filter,然后事实证明是不可以的。啊,它依然是全部是灰色,我们没有办法解决这个问题。啊,那第二点啊,我们可以做的是事情是什么呢?我本来想尝试去写有没有filter一个属性能够反转这个过滤器,然后我就查了一些资料,发现这个呃,Chrome它里面灰色100%的算法呢,大概就是从RGB这三个这个位置上三个这个颜色值上取一定的系数,然后加在一起,然后每个相位都算一下,然后我我本身在图像处理方面比较菜,所以呢,这个全灰的算法看起来呢是不可逆的,就不能重新算回来了,那所以呢,我就采用了一些别的一些方法,比如说我们现在用的方法叫。遮挡解决方案,之前的filter是过滤全部网页,那我们现在其实可以设置一个遮挡,这个属性叫backdrop filter就在整个页面上,我们只照上一个灰色的一个一个弹层啊,就整个一个灰色,巨大一个div,我们可以用这个代码来实现。
05:13
啊,这个HTML代码,我们把它放到我们的这个CS之上。而这个RTML保持我们的position是relative,这没啥说的,Rtl before,也就是说加上一个伪类,这个伪类呢,啊,生成一个position fixed,然后它这个弹窗。出来的模态窗,然后呢,是一个呃,这个全灰的一个颜色,并且呢,记得用这个pointit摄纳,这样不会阻止底下的交互,然我们来刷新一下这个页面。啊,其实也就实现这个全局的智慧啊,全局的智慧,那如如果我们把这个face改成absolute。刷新一下,就会实现一个非常有趣的一个叫呃,首屏智慧。我们来看一下。啊,只有手屏是灰色,比别的地方都是彩的啊,都是彩的这个这个效果啊,这个效果。
06:03
OK,那这种情况下我们如何实现某一个div的特殊高量呢?那我们就可以把我们刚才这个叫叫not agree。这里。把它粘上了啊,然后position设置成一个。啊,一个相对定位,然后呢,我们的Z-index之前的弹窗是100,我们现在把它设计成1000啊,让它飘出来啊,层级飘出来刷新一下啊就可以保证啊这个只要是设置了叫叫not gr3热class都可以在当前的这个div之下呢,指挥的解决方案下保持彩色,哎,这个看起来就是一个很不错的一个解决方案,而且F本身呢,可能还有会有一点点的性能损耗,对吧,所以呢,就实现了这个效果,那那个这个暂时实现了,OK,而且呢,还实现了非常骚包的这个首屏智慧的一个效果,那但是它其实也有一个小问题。
07:01
啊,这个小问题就是我们本身来说,呃,Filter它的兼容性还是比较好的,我们可以仔细看一下这个图啊,基本上主流浏览器都是飘绿的。啊,Filter,而且的版本支持都比较好,但是backdrop filter它的主流版本浏览器呢,就是一般啊,尤其是far。Firefox版本它只支持到了103,要知道我我现在本地最新的版本我才装到了108。哎,107好像。也就是说,只有最新的firefox才支持,很容易就失效了。啊,所以这是back这个filter这个解决方案的主要的问题啊。这个,那我们啊,既然他有兼容性问题,那我们就回来再讨论一个解决方案,也就是说我们其实可以通过这个,我们整个浏览器的标签是一棵树,那我们既然可以设置某一个元素的,它的filter是灰色,那么我们可以就精确的定位到哪些元素设置,哪些元素不设置。对吧,然后我们采用的方法就是。
08:02
呃,基于一些选择器,我们把这个代码给大家演示一下。比如说我们我们设置把这个代码粘过来。这段代码的意思就是我们在select里面设置一些选择器。这个选择器啊,就是我们这个保持彩色的元素啊,这个元素我们设置完成之后,然后你看一下它的这个select啊,我们我们便利这个select,然后把select选中所有的DOM元素呢啊,这个DOM节点上都标记一个叫sta color。啊,Sta color,然后sta变为处之后呢,我们我们向上变利,它所有的parent里面都。这个标记一个水平,叫colorful。那这样的话,我们每一个属性啊,每一个div是不是彩色就都已经标记完毕了,然后我们再来执行第二段代码。这段代码意思就是啊,我们便利从上到下,这个时候我们每个节点啊,本身是要彩色标记成是要带color它的副元素啊,如果这个彩色的副元素就标记成叫colorful。
09:07
啊,就colorful,然后呢,我们就work整个DOM节点数啊,如果这个DOM节点是sta color直接存啊,就是说明你不用什么都不用干,如果它是没有卡拉,就当前这个节点没有标记卡拉,那它一定是需要置挥的,所以我们就把它的克拉,这个制挥的克拉给它选择上,然后呢在递归执行整个这个过程就可以了,就只要你没有标记,我就把你置灰,然后return,只要你标记了,我就继续向下遍历,这样的话,我们就可以精确的把这个制灰的这个class呀,精确的赋制给所有需要制灰的元素,而剩下的元素,那当然就是我们的高亮元素啊,我们大概最后再看一下这个效果。这个效果就是我们选了一个not GR和呃,Class是not GR,还有ID是not gr2啊,这样的话,我们的页面的div中啊,这个视频是not gr2。然后呢,这个div和这个图片是not gr3,我们最后再来看一下这个效果。
10:07
部分指挥。啊,就实现了这个效果,所以呢,我觉得这种这种东西啊,或者说这个这种情况,其实大部分情况都遇遇不到,但是我觉得作为一个面试题的话,我觉得可以考察到面试者的CSS技术,呃,GS到我们的便利技术,还有一些递归思想以及兼容性问题,我觉得是一个非常不错的面试题,这个题你会了吗?
我来说两句