您的位置: 首页  >  IT文章  >  javascript判断浏览器是不是支持css3的属性

javascript判断浏览器是不是支持css3的属性

分类: IT文章 • 2022-05-01 23:02:52
javascript判断浏览器是否支持css3的属性
  1. ar supports = (function() {  
  2.     var div = document.createElement('div'),  
  3.         vendors = 'Webkit Moz O ms'.split(' '),  
  4.         len = vendors.length;  
  5.     return function(prop) {  
  6.         var dstyle = div.style;  
  7.         if (prop in dstyle) return true;  
  8.         prop = prop.replace(/^[a-z]/, function(val) {  
  9.             return val.toUpperCase();  
  10.         });  
  11.         while (len--) {  
  12.             if (vendors[len] + prop in dstyle) {  
  13.                 return true;  
  14.             }  
  15.         }  
  16.         return false;  
  17.     };  
  18. })();  
  19.   
  20. if (supports('BoxAlign')) {  
  21.     document.documentElement.className += ' BoxAlign';  
  22. }  

原理是：
1.创建一个div，然后可以获得div.style，它是个css属性数组。
2.首先检查该属性是否包含在div.style数组中，如果是，直接返回true。
3.检查各种前缀（Webkit Moz O ms），比如webkit加上该属性，即webkitTransition，如果包含在div.style中，返回true。
4.值得注意的是在CSS中属性名为：-webkit-transition，但是在DOM的style中，却是对应webkitTransition。

相关推荐