0

How do I invert image color in HTML

Inverting image color in html HI, so I'm making this button that turns my website into darkmode. I have a png image and I made a function in js function invert() { document.getElementById("theImage").style.filter = "invert(100%)"; } My image in my html is <svg onclick="invert()" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)"/></svg> It works when I invert it but when I click on it again to invert it back to normal it stays inverted... Does anybody knowk how to fix this?

20th Mar 2020, 7:18 AM
Rich Lai
1 Antwort
0
Try to create css class with invert, then add / remove class from element These method should be useful for you: element.classList.remove("my-class") element.classList.add("my-class") element.classList.contains(my-class)
20th Mar 2020, 7:57 AM
Michal
Michal - avatar