动态应用CSS滤镜

Question

如何动态应用CSS滤镜？我已经在Chrome浏览器中尝试了以下方法。

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

- Jacob

Answer 1

您应该将值设置为webkitFilter属性，而不是style对象。这种语法可以使用：

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

如果您不知道JavaScript属性名称，可以通过CSS属性引用它（就像karaxuna建议的那样，也可以这样做）：

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

- Pavlo

---

有什么想法可以将两个过滤器组合起来吗？比如 亮度 和 反转？ - Maciej Jankowski

@MaciejJankowski 只需用空格分隔它们，"brightness(50%) invert()"：http://jsfiddle.net/bj4p0sxm/ - Pavlo

Answer 2

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

- karaxuna

Answer 3

将该过滤器添加到一个类中:

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

并切换该类：

image.classList.toggle('bright');

- Blender

---

@PavloMykhalov：嗯，-webkit属性也不是。 - Blender

Answer 4

1) 检查浏览器是否支持css-filters（如果需要）
2) 检测当前浏览器中“filter”属性是否需要供应商，并保存它
3) 以以下格式设置过滤器值：

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

或者

el.style.vendorFilter = value;

请查看以下小型演示：http://codepen.io/malyw/pen/EDnmt
此外，您还可以找到一个大型演示，展示CSS滤镜的效果：http://malyw.github.io/css-filters/

- Serg Hospodarets