首页 > 语言 > JavaScript > 正文

JS判断浏览器是否支持某一个CSS3属性的方法

2024-05-06 16:09:52
字体:
来源:转载
供稿:网友

css3表现冲击最大的就是动画了,因此很有必要去事先判断浏览器是否支持,写CSS3动画库就只有部分浏览器支持

1、引子

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。

2、检测方法

下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性:

  1. /**  
  2. * 判断浏览器是否支持某一个CSS3属性  
  3. * @param {String} 属性名称  
  4. * @return {Boolean} true/false  
  5. * @version 1.0  
  6. * @author ydr.me  
  7. * 2014年4月4日14:47:19  
  8. */ 
  9.  
  10. function supportCss3(style) {  
  11. var prefix = ['webkit''Moz''ms''o'],  
  12. i,  
  13. humpString = [],  
  14. htmlStyle = document.documentElement.style,  
  15. _toHumb = function (string) {  
  16. return string.replace(/-(/w)/g, function ($0, $1) {  
  17. return $1.toUpperCase();  
  18. });  
  19. };  
  20.  
  21. for (i in prefix)  
  22. humpString.push(_toHumb(prefix[i] + '-' + style));  
  23.  
  24. humpString.push(_toHumb(style));  
  25.  
  26. for (i in humpString)  
  27. if (humpString[i] in htmlStyle) return true;  
  28.  
  29. return false;  

3、使用方法

alert(supportCss3('animation-play-state'));

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选