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?
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)