Dynamically apply CSS filter

javascript html css google-chrome filter

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

javascript html css google-chrome filter

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

javascript html css google-chrome filter

Add that filter to a class:

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

And toggle that class:

image.classList.toggle('bright');

CodeHunter