如何使用CSS和JS使网页页面灰掉
让页面灰掉，通常是通过CSS样式或JavaScript来实现。以下是一些具体的方法：
一、使用CSS样式
应用filter属性
CSS的filter属性可以用来对元素应用图形效果，如灰度。要将整个页面或特定元素变灰，可以在该元素的CSS样式中应用filter: grayscale(100%);。例如，要让整个页面变灰，可以在标签或标签的样式中添加此属性：
css
html, body {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* 兼容Webkit内核的浏览器 */
}
这段代码会将HTML文档中的所有内容转为灰度显示。
二、使用JavaScript
如果需要在特定条件下控制页面的灰度效果，可以使用JavaScript来动态添加或删除CSS类。
定义CSS类
首先，在CSS中定义一个将页面变灰的类：
css
.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
使用JavaScript添加或删除类
然后，在JavaScript中，根据条件为页面元素（如或）添加或删除这个类：
javascript
// 获取根元素
const htmlElement = document.documentElement;
// 定义函数来切换页面的灰度状态
function toggleGray() {
htmlElement.classList.toggle('gray');
}
// 例如，为按钮添加点击事件来切换灰度状态
const toggleGrayButton = document.getElementById('toggleGrayButton');
toggleGrayButton.addEventListener('click', toggleGray);
在HTML中，添加一个按钮来触发这个事件：
html
