JavaScript判断浏览器对CSS3属性是否支持的多种方法


Posted in Javascript onNovember 13, 2016

前言

CSS3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transitionanimation-play-state,就只有部分浏览器支持。

下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性:

第一种:javascript比较常用下面这个代码:

var support_css3 = (function() {
 var div = document.createElement('div'),
  vendors = 'Ms O Moz Webkit'.split(' '),
  len = vendors.length;
 
 return function(prop) {
  if ( prop in div.style ) return true;
 
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });
 
  while(len--) {
   if ( vendors[len] + prop in div.style ) {
   return true;
   } 
  }
  return false;
 };
})();

使用:检查是否支持transform

if(support_css3('transform')){

}else{

}

第二:JavaScript方法2:不支持ie6

function isPropertySupported(property)
{
 return property in document.body.style;
}

使用:

记得上面的属性,要用backgroundColor替换background-color

if(isPropertySupported('opacity')){

}else{

}

第三:CSS.supports

CSS.suports是CSS3 @support 规则中比较特别的一个,每一个支持@support规则的都支持下面这个函数(不推荐这种方法,毕竟@support也有兼容性,某些浏览器可能支持CSS3属性中的一个,但却不支持@support

//pass the same string as you pass to the @supports rule
if(CSS.supports("(background-color: red) and (color:white"))
{
 document.body.style.color = "white";
 document.body.style.backgroundColor = "red";
}

最后再分享一个判断浏览器是否支持某些HTML5属性的函数,比如input属性是否支持palaceholder.

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};

用法:

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
 // fallback
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jquery实现图片预加载
Dec 25 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
JavaScript函数基础详解
Feb 03 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
Vue组件创建和传值的方法
Aug 17 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
JS实现的几个常用算法
Nov 12 #Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 #Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 #Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 #Javascript
使用JS代码实现点击按钮下载文件
Nov 12 #Javascript
JavaScript中浅讲ajax图文详解
Nov 11 #Javascript
javascript 实现动态侧边栏实例详解
Nov 11 #Javascript
You might like
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
微信小程序日历效果
2018/12/29 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python实现在线翻译功能
2020/03/03 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
空指针到底是什么
2012/08/07 面试题
元旦文艺汇演主持词
2014/03/26 职场文书
目标管理责任书
2014/04/15 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫