如何在网页置灰的时候，部分元素保持彩色-有意思的面试题

Web_boom

于 2023-02-15 20:50:09 发布

阅读量227

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Android_boom/article/details/129050492

版权

本文探讨了如何在网页全局置灰时，使部分元素保持彩色。尝试了filter重置方法失败后，转向使用backdrop-filter作为遮挡解决方案。通过遍历并标记元素，实现了在保持网页大部分元素灰色的同时，允许特定元素保持原有颜色。同时，文章提到这种方法存在兼容性问题，并提供了应对策略。最后，作者分享了一份前端大厂面试宝典，包含201道面试题和解析。

摘要由CSDN通过智能技术生成

一键变灰

这个大部分同学都写了，直接

html{filter: grayscale(100%);
}

考虑ie之类的兼容性的话，就直接把兼容性的属性都搞上去

html{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

如果想控制的更动态一些，可以用js控制html的class来实现这个切换过程

<button class="btn" id="set-gray">置灰</button>

let style = document.createElement('style')
let graySelector = 'gray-filter'
style.setAttribute('type', 'text/css')
// style.setAttribute('data-vite-dev-id', id)
style.textContent = `.${graySelector}{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gra