CSS + Javascript 中的灰度答案

【问题标题】：Grayscale in CSS + JavascriptCSS + Javascript 中的灰度
【发布时间】：2021-11-04 00:50:50
【问题描述】：

有人可以帮助我吗，我在 html 中创建我的网站，并希望使图像最初采用“灰度”配色方案，当点击被着色时，我在 css 中使用 (filter: grayscale(1);) 和我想知道如何点击图片变回颜色。

【问题讨论】：

【解决方案1】：

基于@Sina Kadkhodaei 的回答，我会以这种方式进行 onclick。更具可读性 imo。

function removeClass(element) {
    element.classList.remove("filter");
}

.filter {
    filter: grayscale(1);
}

<img class="filter" onclick="removeClass(this)" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

【讨论】：

【解决方案2】：

如果您想在鼠标按下时着色，请在 css 中使用 :active：

#sample{
  filter: grayscale(1);
}

#sample:active{
  filter: grayscale(0);
}

&lt;img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png"&gt;

或者

如果您想在鼠标点击时着色，请在 JS 中使用 onclick 和 style.filter：

let imgs=document.getElementsByTagName('img');
for(let i=0;i<imgs.length;i++)
imgs[i].onclick=function(){this.style.filter="grayscale(0)";};

#sample{
filter: grayscale(1);
}

&lt;img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png"&gt;

【讨论】：