JS判断浏览器是否支持某一个CSS3属性_html/css_WEB-ITnose

1、引子

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

2、检测方法

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

Js代码   

/**      * 判断浏览器是否支持某一个CSS3属性      * @param {String} 属性名称      * @return {Boolean} true/false      * @version 1.0      * @author ydr.me      * 2014年4月4日14:47:19  */           function supportCss3(style) {       var prefix = [‘webkit’, ‘Moz’, ‘ms’, ‘o’],       i,       humpString = [],       htmlStyle = document.documentElement.style,       _toHumb = function (string) {       return string.replace(/-(\w)/g, function ($0, $1) {       return $1.toUpperCase();       });       };               for (i in prefix)       humpString.push(_toHumb(prefix[i] + ‘-‘ + style));               humpString.push(_toHumb(style));               for (i in humpString)       if (humpString[i] in htmlStyle) return true;               return false;   }  

 3、使用方法

Js代码   

alert(supportCss3(‘animation-play-state’));  

 

4、参考资料

http://note.rpsh.net/posts/2011/05/20/css

立即学习“前端免费学习笔记(深入)”;

http://ecd.tencent.com/css3/guide.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3092449.html

(0)
上一篇 2025年3月28日 13:58:28
下一篇 2025年3月28日 13:58:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论