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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
javascript用函数实现对象的方法
May 14 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
简单实现js上传文件功能
Aug 21 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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获取昨天、今天及明天日期的方法
2016/02/03 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python字典快速保存于读取的方法
2018/03/23 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python中的self用法详解
2019/08/06 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
使用python实现飞机大战游戏
2020/03/23 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
家长学校工作方案
2014/05/07 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
投标承诺函格式
2015/01/21 职场文书
校长一岗双责责任书
2015/05/09 职场文书
正规借条模板
2015/05/26 职场文书
教育读书笔记
2015/07/02 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android