动态应用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

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

Answer 3

将该过滤器添加到类：

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

并切换该课程：

image.classList.toggle('bright');

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/