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

前端之家收集整理的这篇文章主要介绍了JS判断浏览器是否支持某一个CSS3属性的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、引子

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

2、检测方法

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

支持某一个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、使用方法

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

原文链接:https://www.f2er.com/js/57501.html

猜你在找的JavaScript相关文章