如何使用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

Toggle Gray