Search code examples
javascripthtmlcsscolorsgrayscale

Grayscale in CSS + Javascript

Can someone help me, I was creating my site in html and wanted to make the images initially be in the "grayscale" color scheme and when clicking were colored, I used (filter: grayscale(1);) in css and I would like to know how do I click the image back to color.

Solution

  • Based on @Sina Kadkhodaei its answer, I would do the onclick this way. More readable 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">