How to change image hue with Javascript

Question

I'm trying to make an image hue changer using JavaScript, HTML, and CSS. The problem is that I need to change the image hue using javascript. I've tried using document.getElementById("output").style but nothing about hue showed up. I am able to change hue using HTML and CSS:

HTML: <img id="output" width="0" height="0" style="border: 0px solid black" class="huerotate">

CSS: .huerotate {-webkit-filter: hue-rotate(180deg);}.

I haven't been able to replicate that using Javascript.

Answer 1

The property is called filter (ignoring webkit), not anything to do with hue.

document.getElementById("output").style.filter = "hue-rotate(180deg)";

Or with webkitFilter:

document.getElementById("output").style.webkitFilter = "hue-rotate(180deg)";