JS代码片段:判断浏览器是否支持CSS3属性

2013-12-10 20:34:16  来源:w3cplus 

钱柜娱乐Webjx文章简介:js判断浏览器是否支持css3属性。

var cssSupports = (function() {
 var div = document.createElement('div'),
  vendors = 'Khtml O Moz Webkit'.split(' '),
  len = vendors.length;
 return function(prop) {
  if ( prop in div.style ) return true;
  if ('-ms-' + prop in div.style) return true;
  
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });

  while(len--) {
   if ( vendors[len] + prop in div.style ) {
   return true;
  }
 }
  return false;
 };
})();

下面简单说下两个实例:

border-radius

判断浏览器是否支持border-radius,支持则给html添加class为border-radius,否则添加class为no-border-radius

if(cssSupports('borderRadius')){
 var oHtml = document.documentElement;
 oHtml.className += ' border-radius';
}else{
 oHtml.className += ' no-border-radius';
}

flex

因为这个flex是出现在display的值上面的,而我们上面的方法其实只适用于属性,所以直接是不行的,我们可以通过曲线的方法来判断,和flex相关的还有很多其他的属性如order,align-content,align-item,align-slef等,我们就用最简单的order来曲线判断是否支持flex吧。(注意因为flex除了标准版本外,还有其他两个版本,这里只挑标准的属性判断)

if(cssSupports('order')){
 var oHtml = document.documentElement;
 oHtml.className += ' flex';
}else{
 oHtml.className += ' no-flex';
}

如果你对上面那段js有点不明白,你可以在控制台运行这段代码,就会看到所有style的属性

(function(){
 var oDiv = document.createElement('div');

 for(var prop in oDiv.style){
  console.log(prop);
 }
})();

更多