这家伙一点都不懒

如何判断浏览器是否支持某一个css3属性

Javascript2014-09-15 14:11

查看某一个css3属性在浏览器中的支持情况:http://caniuse.com/

css3的出现让页面更多丰富多彩,在实际使用中我们需要判断某一css3的浏览器兼容性,方法如下:

/*
 * @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'],
        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'));

评论(0)
  • 暂无评论,求挽尊...
还可输入200个字