我想使用html和javascript在单击特定按钮时过滤图像

Question

我是网络开发新手。我正在努力完成我的项目。我想在单击特定按钮时过滤图像。我浏览了 w3schools 的代码，但不太清楚。我的项目只能使用 html 和 JavaScript 来完成。谢谢！

由于缺乏知识，我无法完成任务。

Answer 1

如果您的意思是在此处的图像上添加灰度等滤镜

1 - 创建一个 CSS 类，其中包含您要添加的过滤器：

.grayscale {
  filter: grayscale(100%);
}

2 - 将 id 添加到要更改/添加事件侦听器的元素：

<button id="myButton" role="button" aria-label="Toggle grayscale filter">Toggle Grayscale</button>
<img id="myImage" src="yourimage.png" alt="A descriptive text for the image">

3 - 将其添加到 HTML 中的脚本标记中

document.addEventListener('DOMContentLoaded', (event) => {
    let button = document.getElementById('myButton');
    let img = document.getElementById('myImage');
    
    button.addEventListener('click', (e) => {
        e.preventDefault();
        img.classList.toggle('grayscale');
    });
});

它基本上等待 DOM 加载，获取具有指定 id 的图像和按钮，向按钮添加事件侦听器，并在事件侦听器激活时切换图像的类，在本例中，使用点击