javascript 动态应用 CSS 过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14849539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically apply CSS filter
提问by Jacob
How to dynamically apply CSS filters? I have tried the following for Chrome.
如何动态应用 CSS 过滤器？我已经为 Chrome 尝试了以下方法。
image.style = "-webkit-filter: brightness(50%);";
回答by Pavlo
You should set value to the webkitFilterproperty, not to the styleobject. This syntax will work:
您应该将值设置为webkitFilter属性，而不是style对象。此语法将起作用：
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):
如果你不知道 JavaScript 属性名称，你可以通过 CSS 属性引用它（就像 karaxuna 建议的那样，也可以）：
image.style["-webkit-filter"] = "brightness(50%)";
回答by karaxuna
image.style["-webkit-filter"] = "brightness(50%)";
回答by Blender
Add that filter to a class:
将该过滤器添加到类中：
.bright {
-webkit-filter: brightness(50%);
}
And toggle that class:
并切换该类：
image.classList.toggle('bright');
回答by Serg Hospodarets
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:
1) 检查浏览器是否支持 css-filters (如果需要)
2) 在当前浏览器中检测“过滤器”属性是否需要供应商并保存它
3) 设置过滤器值的格式：
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/
检查它的小演示：http: //codepen.io/malyw/pen/EDnmt
你也可以找到显示 css 过滤器的大型演示：http: //malyw.github.io/css-filters/
