JS判断浏览器是否支持某一个CSS3属性的方法
更新时间：2014年10月17日 16:47:58 投稿：whsnow
css3表现冲击最大的就是动画了，因此很有必要去事先判断浏览器是否支持，写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'));
相关文章
本篇文章主要介绍了微信小程序入门教程，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-11-11
这篇文章主要给大家介绍了利用Javascript计算二维数组重复值的方法，文中给出了详细的示例代码，相信对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。2016-12-12
这篇文章主要介绍了js获取及修改网页背景色和字体色的方法,涉及JavaScript针对页面元素属性的相关操作技巧,需要的朋友可以参考下2015-12-12
本篇文章主要是对js判断60秒以及倒计时的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最常见的方式是使用js函数操作excle文件，这种方式可能因浏览器不同，存在兼容性问题。另一种简单方法就是导出一个excel能识别格式的xml文件，用excel打开。2013-07-07
现如今做电商网站必不可少的一个效果就是限时抢购，这也是各大电商网站的一种促销手段。如何实现倒计时限时抢购，本文为大家分享了javascript实现倒计时限时抢购的的相关代码，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要是对Javascript作用域与变量提升进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了H5移动端适配，Flexible方案,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了js实现仿QQ秀换装效果的方法,实例分析了javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
今天我们从前端的角度了解一下浏览器存储，我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
最新评论