動態應用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/