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


Posted in Javascript onOctober 17, 2014

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'));

Javascript 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
九种原生js动画效果
Nov 11 Javascript
JavaScript中的this机制
Jan 30 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 #Javascript
js实现飞入星星特效代码
Oct 17 #Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 #Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 #Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 #Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 #Javascript
You might like
聊天室php&mysql(三)
2006/10/09 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
一段php加密解密的代码
2007/07/16 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
优秀应届毕业生推荐信
2014/02/18 职场文书
文明寄语大全
2014/04/11 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
党代会心得体会
2014/09/04 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
承诺书范本
2015/01/21 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python