动态应用CSS过滤器

Question

如何动态应用CSS过滤器？对于Chrome我已经尝试了以下内容。

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

Answer 1

你应该设定值的webkitFilter财产，不给style对象。这句法will work：

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

如果你不知道JavaScript属性的名称，你可以通过CSS属性引用它（如karaxuna建议，will work too）：

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

Answer 2

该过滤器添加到类：

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

并切换该类：

image.classList.toggle('bright'); 

Answer 3

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

Answer 4

1）检查浏览器支持CSS -filters（如果需要）
2）如果检测的“过滤器”属性在当前的浏览器需要供应商，并将其保存在格式
3）设置过滤器值：

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

或

el.style.vendorFilter = value; 

检查它小的演示：http://codepen.io/malyw/pen/EDnmt
您也可以找到大量的演示显示在行动CSS滤镜：http://malyw.github.io/css-filters/