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

Question

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

根据Default CSS过滤器值提供的亮度和对比度信息,我尝试了以下几个默认值:

 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!";
}

看到例子