花了几个小时写了个API，为了兼容多种用法和测试花了不少时间，求鞭打、嘲笑和建议。

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5. </head>
  6. <body>
  7.  
  8. </body>
  9. <script>
  10.     //Cound use four types of propertyName,like:
  11.     //'animation','-webkit-animation','webkit-animation','webkitAnimation'
  12.     function isSupportCSS(propertyName) {
  13.         var div = document.createElement('div'),
  14.             getComputedStyle = window.getComputedStyle || (document.defaultView && document.defaultView.getComputedStyle),
  15.             result,
  16.             body = document.body || document.getElementsByTagName('body')[0],
  17.             currentStyle,
  18.             //to replace propertyName from dash style to camel case
  19.             rcamelCase = /-([\da-z])/gi,
  20.             //to see the function expression toCamelCase。we need the first character of propertyName is Uppercase，like 'MozAnimation',when the browser is FF.
  21.             //so we need to keep the first dash when the browser is FF.
  22.             rprefix = /^-(?!moz)/i,
  23.             toCamelCase = function (string) {
  24.                 return string.replace(rprefix,'').replace(rcamelCase,function (all,letter) { return letter.toUpperCase();});
  25.             },
  26.             prefixArray = ['webkit-','moz-','ms-'],
  27.             i = prefixArray.length,
  28.             rhasPrefix = /^-?(webkit|moz|ms)/i,
  29.             //Could you show me a better way to test whether some property need to add the prefix?
  30.             sCSS3 = 'animation|appearance|backface|background|border|box|clip|column|filter|font|highlight|hyphenate|'+
  31.                     'line|locale|locale|margin|mask|perspective|print|rtl|text|transform|transition|user|writing|app|flex|'+
  32.                     'grid|hyphens|content|adjust|flow|wrap|scroll|user|touch|binding|font|image|outline|orient|stack|tab|window|marquee|svg',
  33.             rCSS3 = new RegExp(sCSS3,'i');
  34.         //now we just support string
  35.         if(typeof propertyName !== 'string') {
  36.             return false;
  37.         }
  38.         //to handle the situation when propertyName like 'moz-animation'
  39.         if (propertyName.indexOf('moz') === 0) {
  40.             propertyName = '-'+propertyName;
  41.         }
  42.  
  43.         propertyName = toCamelCase(propertyName);
  44.  
  45.         if (getComputedStyle) {
  46.             result = getComputedStyle(div)[propertyName === 'float'? 'cssFloat' :propertyName];
  47.             if (result || result === '') return true;
  48.             //if need add prefix
  49.             if (rCSS3.test(propertyName)) {
  50.                 while (i > 0) {
  51.                     result = getComputedStyle(div)[rhasPrefix.test(propertyName)? propertyName : toCamelCase(prefixArray[i-1]+propertyName)];
  52.                     if (result || result === '') return true;
  53.                     i--;
  54.                 }
  55.             }
  56.         //old IE
  57.         } else if (body.currentStyle || body.runtimeStyle) {
  58.  
  59.             div.style['display'] = 'none';
  60.             //only when the element have appended to the DOM tree it can have the currentStyle property
  61.             body.appendChild(div);
  62.             currentStyle = div.currentStyle || div.runtimeStyle;
  63.             result = currentStyle[propertyName === 'float'? 'styleFloat' :propertyName];
  64.  
  65.             if (result || result === '') {
  66.                 body.removeChild(div);
  67.                 return true;
  68.             }
  69.             if (rCSS3.test(propertyName)) {
  70.                 result = currentStyle[rhasPrefix.test(propertyName)? propertyName : toCamelCase('ms-'+propertyName)];
  71.                 if (result || result === '') {
  72.                     body.removeChild(div);
  73.                     return true;
  74.                 }
  75.             }
  76.             body.removeChild(div);
  77.         }
  78.         return false;
  79.     }
  80.     alert('animation:'+isSupportCSS('animation'));
  81.     alert('webkit-animation:'+isSupportCSS('webkit-animation'));
  82.     alert('-webkit-animation:'+isSupportCSS('-webkit-animation'));
  83.     alert('webkitAnimation:'+isSupportCSS('webkitAnimation'));
  84.     alert('moz-animation:'+isSupportCSS('moz-animation'));
  85.     alert('-moz-animation:'+isSupportCSS('-moz-animation'));
  86.     alert('mozAnimation:'+isSupportCSS('mozAnimation'));
  87.     alert('ms-animation:'+isSupportCSS('ms-animation'));
  88.     alert('-ms-animation:'+isSupportCSS('-ms-animation'));
  89.     alert('msAnimation:'+isSupportCSS('msAnimation'));
  90. </script>
  91. </html>

测试浏览器是否支持某个CSS属性的更多相关文章

  1. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  2. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  3. 判断浏览器是否支持指定CSS属性和指定值

    /** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...

  4. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  5. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  6. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  7. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  8. Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...

  9. 测试浏览器是否支持JavaScript脚本

    如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证.HTML注释符号是以 <-- 开始以 --> 结束的.如果在此注释符号内编写 JavaS ...

随机推荐

  1. Mysql_游标

    MySQL中的游标是一个十分重要的概念.游标提供了一种对从表中检索出的数据进行操作的灵活手段,就本质而言,游标实际上是一种能从包括多条数据记录的结果集中每次提取一条记录的机制.MySQL中的游标的语法 ...

  2. AHD/TVI/CVI/CVBS/IP

    1.CVBS是最早的模拟摄像机,现在看来效果差. 2.AHD   TVI   CVI都是模拟摄像机的升级版,俗称同轴,三种名称只是用的方案系统不一样而已,相比模拟的效果清晰,和模拟的外观都是一样的bn ...

  3. 强化学习算法Policy Gradient

    1 算法的优缺点 1.1 优点 在DQN算法中,神经网络输出的是动作的q值,这对于一个agent拥有少数的离散的动作还是可以的.但是如果某个agent的动作是连续的,这无疑对DQN算法是一个巨大的挑战 ...

  4. vector读入指定行数但不指定列数的数字

    #include <iostream> #include <vector> #include <cstdio> #include <cstring> # ...

  5. C# 导入（读取） WPS ET文件

    本文章介绍基于VS2010 Winform 的WPS2016二次开发 ET数据读取程序 本程序支持多个Sheet页面 前提:引用WPS安装目录下的etapi.dll private void butt ...

  6. jsp学习之包含——include

    http://blog.e23.cn/?uid-1255655-action-viewspace-itemid-134232 1.include: Include 指令: <%@ include ...

  7. 项目UML设计（团队）

    团队 队名 boy next door 队员 林晗 124(组长) 微博链接 显东 114 微博链接 基智 505 微博链接 松雄 126 微博链接 团队分工 分工表 任务 林晗 显东 基智 松雄 前 ...

  8. RYU 灭龙战 second day（内容大部分引自网络）

    RYU 灭龙战 second day(内容大部分引自网络) 写好的markdown重启忘了保存...再写一次RLG 巨龙的稀有装备-RYU代码结构 RYU控制器代码结构的总结 RYU入门教程 RYU基 ...

  9. ESXi主机性能问题

    服务器遇到一个问题 百度了下 基本发现是 四路的 windows 服务器的问题. 造成一些 性能降低. 然后查看了下几个虚拟机 的确是设置的4个虚拟插槽 根据百度的结果 要么改配置文件 要么改 这个四 ...

  10. ITSS相关的名词解释

    1.ITSM(IT Service Management)IT服务管理.从宏观的角度可以理解为一个领域或行业,人中观的角度可以理解为一种IT管理的方法论,从微观的角度可以理解为是一套协同动作的流程.从 ...