CSS3 的出现让浏览器的表现更加的丰富多彩, 表现冲击最大的就是动画了, 在日常书写动画的时候, 很有必要去事先判断浏览器是否支持, 尤其是在写 CSS3 动画库的时候.
那么如何使用 JS 判断浏览器是否支持 css3 属性?
使用 JS 脚本判断浏览器是否支持某一个 CSS3 属性:
- /**
- * 判断浏览器是否支持某一个 CSS3 属性
- * @param {
- String
- } 属性名称
- * @return {
- Boolean
- } true/false
- * @version 1.0
- * @author ydr.me
- */
- 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;
- }
使用方法
alert(supportCss3('animation-play-state'));
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !!
来源: http://www.css88.com/qa/javascript/14702.html