CSS + Javascript 中的灰度

Question

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

Answer 1

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

#sample{
  filter: grayscale(1);
}

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

<img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

或

如果您想在单击鼠标时着色，请在 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);
}

<img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

Answer 2

根据@Sina Kadkhodaei 的回答，我将以这种方式执行 onclick。更具可读性。

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">

Grayscale in CSS + Javascript