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

见例子