使用javascript检测对-webkit-filter的支持

Question

使用JavaScript，您如何检测浏览器是否支持webkit过滤器？

根据Default CSS filter values for brightness and contrast提供的信息，我尝试了以下几个默认值：

 if (window.matchMedia && window.matchMedia("( -webkit-filter:opacity(1) )").matches) {
 alert("supported");
 }else{
 alert("not supported");
 }

Answer 1

测试是否支持css属性的相对简单的方法如下：

1. 创建元素
2. 将有问题的CSS应用于元素
3. 读取值 - 如果它与您在步骤2中设置的值相同，则支持该值，否则不支持

JS：

var e = document.querySelector("img");
e.style.webkitFilter = "grayscale(1)";
if(window.getComputedStyle(e).webkitFilter == "grayscale(1)"){
   "supported!";
}

see the Example