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(DHTML)中的一些技巧
Jan 09 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
vuex的使用步骤
Jan 06 Vue.js
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
再次研究下cache_lite
2007/02/14 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
解析link_mysql的php版
2013/06/30 PHP
php查询操作实现投票功能
2016/05/09 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
高一数学教学反思
2014/02/07 职场文书
企业总经理岗位职责
2014/02/13 职场文书
网络营销计划
2015/01/17 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技