Dynamically apply CSS filter

Question

How to dynamically apply CSS filters? I have tried the following for Chrome.

image.style = "-webkit-filter: brightness(50%);";

Solution 1

You should set value to the webkitFilter property, not to the style object. This syntax will work:

image.style.webkitFilter = "brightness(50%)";

If you don't know JavaScript property name, you can reference it by CSS property (like karaxuna suggested, will work too):

image.style["-webkit-filter"] = "brightness(50%)";

Solution 2

image.style["-webkit-filter"] = "brightness(50%)";

Solution 3

Add that filter to a class:

.bright {
    -webkit-filter: brightness(50%);
}

And toggle that class:

image.classList.toggle('bright');

Comments

[Blender]

@PavloMykhalov: Well, neither are -webkit properties.

[Maciej Jankowski]

any idea how to combine two filters? say brightness and invert?

[Pavlo]

@MaciejJankowski just separate them with a space, "brightness(50%) invert()": jsfiddle.net/bj4p0sxm