如何检查是否支持css box-shadow（jQuery）？

我正在创建一个完整的CSS布局。 但是，某些浏览器（如IE6）不支持box-shadow（..和-webkit-box-shadow或-moz-box-shadow）。 我想检查它是否不受支持，然后添加其他样式。

这怎么可能在jQuery中？

Martti Laine

Answer 1

var check = document.createElement('div'); var shadow = !!(0 + check.style['MozBoxShadow']); if(shadow) alert('moz-box-shadow available'); 

这就是自己动手的方式。 其他可靠的方法是modernizr库，它为您进行特征检测。

http://www.modernizr.com/

这里根本不需要jQuery。

Answer 2

一个简洁的函数（纯JavaScript，没有jQuery）来检查浏览器支持哪些CSSfunction在快速提示：使用JavaScript检测浏览器中的CSS3支持中进行了描述 。

function如下：

 var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if (prop in div.style) { return true; } prop = prop.replace(/^[az]/, function(val) { return val.toUpperCase(); }); while (len--) { if (vendors[len] + prop in div.style) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); 

用法是这样的：

 if (supports('boxShadow')) { // Do whatever } 

它对我来说就像一个魅力！ 🙂