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 相关文章推荐
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
js实现三角形粒子运动
Sep 22 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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制作静态网站的模板框架(四)
2006/10/09 PHP
php跨站攻击实例分析
2014/10/28 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
删除重复数据的算法
2006/11/23 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
在python里面运用多继承方法详解
2019/07/01 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
adidas泰国官网:adidas TH
2020/07/11 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
学生手册家长评语
2014/02/10 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2014年实习期工作总结
2014/11/27 职场文书
工程部主管岗位职责
2015/02/12 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python