Invert colors of an image in CSS or JavaScript

Question

How do I invert colors of an image (jpg/png..) in either css if possible or javascript?

Previous related questions don\'t give enough detail.

Answer 1

You can apply the style via javascript. This is the Js code below that applies the filter to the image with the ID theImage.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

And this is the

Now all you need to do is call invert() We do this when the image is clicked.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

 Click image to invert 

We use this on our website