一直以为filter属性是IE独有的,实际上也确实是,设置filter属性也只有在IE中才有效。
由于对于不同的浏览器需要设置不同的css的属性,所以难免会用到条件来检测浏览器是否有filter属性,看到有一段代码是这样检测的
/*! * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. */
var HAS_FILTER = (function() { return document.createElement('span').style.filter !== undefined; })();
09年的代码了,在浏览器里面试了一下,发现在我的firefox和chrome下,这段代码都返回的是true;
FF版本:
chrome版本:
在调试工具了尝试了一下,代码如下:
firefox中,有了filter属性,typeof还是String
chrome中,仍然是undefined
IE呢?我在IE9下试了试
也是String属性~~
最后的解决方法是:
var HAS_FILTER = (function() {
var a = document.createElement('div');
a.style.filter = 'filter';//这里的filter可以随便设置
return a.style.filter !== "";
})();
在ie中,设置了filter值以后(不管是什么),再调用a.style.filter就不会是空字符串;而因为其他的浏览器都不支持filter属性,所以即使是设置了filter的值,仍然是“”空字符串。测试通过ie6,7,8,9,firefox, chrome