javascript - 动态应用 CSS 过滤器

Question

如何动态应用 CSS 过滤器？我已经为 Chrome 尝试了以下操作。

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

score 10 · Accepted Answer

您应该为webkitFilter属性设置值，而不是style对象。此语法将起作用：

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

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

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

score 3 · Accepted Answer

3

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

于 2013-02-13T08:48:21.847 回答

score 2 · Accepted Answer

将该过滤器添加到类中：

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

并切换该类：

image.classList.toggle('bright');

score -1 · Accepted Answer

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/

4 回答 4