动态应用CSS过滤器

Question

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

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

Answer 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%)";

Answer 2

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

Answer 3

Add that filter to a class:

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

And toggle that class:

image.classList.toggle('bright');

Answer 4

1) Check if browser supports css-filters (if needed)
2) Detect if "filter" property needs vendor in current browser and save it
3) Set filter value in format:

el.style["-vendor-filter"] = value;

or

el.style.vendorFilter = value;

Check small demo for it: http://codepen.io/malyw/pen/EDnmt
Also you can find large demo showing css filters in action: http://malyw.github.io/css-filters/