How to use CSS filters in JavaScript?

Question

I would like to use CSS filters in JavaScript.

Example of CSS filters:

.filter {
    -webkit-filter: blur(20px); /* Blur filter */
    -webkit-filter: invert(1); /* Invert filter */
    -webkit-filter: hue-rotate(100deg); /* Rotate Hue */
    ...
}

For example, how can I make a blurred image using JavaScript?

<img id="image" onmouseover="ImageHover();" src="source.png"/>

while

function ImageHover() {
    document.getElementById('image').??????='???'
}

I hope you guys understand what I want.

Answer 1

I recommend using this so the function can be used with any element/Img you want later

<img id="image" onmouseover="ImageHover(this);" src="source.png"/>

function ImageHover(el){
    el.classList.add("filter");
};

Answer 2

You need to give use to that element's property, as such:

var image = document.getElementById('image');
image.style.webkitFilter = "blur(20px);";

or

image.style["-webkit-filter"] = "blur(20px);";

Answer 3

var photo = document.getElementById('yourId');

function sepia(){
    photo.style.filter = "sepia(100%)";
}