js判断浏览器是否支持某一个css3属性的最佳实践

author author     2022-08-20     405

关键词:

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

检测方法

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

/**2017-01-05
    * 判断浏览器是否支持某一个CSS3属性
    * @param {String} 属性名称
    * @return {Boolean} true/false
    * 
*/
     
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;
}

 

使用方法

alert(supportCss3(‘animation-play-state‘));

 

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

判断浏览器是否支持css3某个属性的方法:/***判断浏览器是否支持某一个CSS3属性*@param{String}属性名称*@return{Boolean}true/false*@version1.0*@authorydr.me*2014年4月4日14:47:19*/ functionsupportCss3(style){varprefix=[‘webkit‘,‘Moz‘,‘ms‘,‘ 查看详情

document.documentelement.style判断浏览器是否支持css3属性

1.document.documentElement.style属性定义了当前浏览器支持的所有Css属性包括带前缀的和不带前缀的例如:animation,webkitAnimation,msAnimation等2.判断浏览器是否支持制定的css属性functionsupport(cssName){varhtmlStyle=document.documentElement.style;if(cssN 查看详情

js关键字in判断一个属性或方法是否属于一个对象

...对象是,“变量”指的是对象的“属性”。 判断当前浏览器是否支持oninput方法if(‘oninput‘indocument.createElement(‘input‘)){alert(‘支持‘)}else{alert(‘不支持‘)}&n 查看详情

jquerycss函数用法(判断标签是否拥有某属性)

判断一个层是否隐藏:$("#id").css("display")=="none" ;在所有匹配的元素中,设置一个样式属性的值:$("p").css("color","red"); 把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性... 查看详情

判断js对象是否拥有某属性

可以用in操作符和对象的hasOwnProperty操作符举例"name"inObjectObject.hasOwnProperty("name")有个公共的方法functionhasPrototype(object,name){return!object.hasOwnProperty(name)&&(nameinobject);} 查看详情

判断js对象是否拥有某属性

1.in运算符varobj={name:‘jack‘};alert(‘name‘inobj);//-->truealert(‘toString‘inobj);//-->true无论是name,还是原形链上的toString,都能检测到返回true。 2.hasOwnProperty方法varobj={name:‘jack‘};obj.hasOwnProperty(‘name‘ 查看详情

js记性

1、判断浏览器是否支持某个属性//判断浏览器是否支持placeholder属性functionisSupportPlaceholder(){varinput=document.createElement(‘input‘);return‘placeholder‘ininput;}  查看详情

php判断一个json对象是否含有某一个属性的方法

property_exists比如:varjson="code":400,"msg":"UserErr"varrest=property_exists(json,‘access_token‘)则rest的值为false 查看详情

使用modernizr检测支持css3

使用Modernizr检测支持CSS3如果支持某个属性,会增加一个class,名字就是该属性;不支持,名字是no-某属性还提供了一个全局Modernizr对象,使用如下:<scriptsrc="js/b/js/jquery-1.11.1.js"></script><scriptsrc="js/modernizr.custom.72745.js"&g... 查看详情

js——判断变量是否为空是否包含某属性,三元表达式(要这个)

1、判断变量是否为空 //定义变量varobj=userinfo:person:user:"1";//并不知道userinfo是否为空,也不知道person是否为空,现在需要获取user的值//判断userinfo不为空,并且person也不为空if(Object.keys(obj.userinfo).length>0&&Object.keys(obj. 查看详情

js判断是否是ie浏览器且给出ie版本

...时效性的问题,代码不生效。就自己写一个吧。怎么去看浏览器的内核等信息----js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核navigator.userAgent这个值取出来是个字... 查看详情

索引最佳实践

...索引时,我们可以通过explain+extended查看SQL的执行计划,判断是否使用了索引以及发生了隐式转换。由于常见的隐式转换是由字段数据类型以及collation定义不当导致,因此我们在设计开发阶段,要避免数据库字段定义,避免出现... 查看详情

JSF 支持 bean 结构(最佳实践)

】JSF支持bean结构(最佳实践)【英文标题】:JSFbackingbeanstructure(bestpractices)【发布时间】:2010-10-1906:20:48【问题描述】:我希望在这篇文章中,我可以得到人们对JSF页面和backingbeans之间接口的最佳实践的意见。我永远无法解决的... 查看详情

jquery如何判断数组是不是为空?

...否为空。具体步骤如下:需要准备的材料分别是:电脑、浏览器、ultraedit。1、在ue编辑器中新建一个空白的html文件,js文件。2、在ue编辑器中输入以下html代码。3、在ue编辑器中输入以下js代码。4、编辑完成以后,在ue编辑器中点... 查看详情

让ie6/ie7/ie8支持css3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性。国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的。到目前为... 查看详情

php核心技术与最佳实践——全局浏览

...殊之处,并对此给出代码例子; 3、第3、4、5章对某一个基础技术应用进行详解;第 查看详情

判断浏览器是否支持filereader

1.js代码://判断浏览器是否支持FileReaderif(typeofFileReader=="undefined"){document.write("您的浏览器不支持FileReader");}else{document.write("您的浏览器支持FileReader");}/***测试结果说明:Google,FF,IE都支持FileReader*但是IE9及以下浏览器不支持FileRea 查看详情

js判断某变量是否为某数组中的一个值的几种方法

1.正则表达式js 中判断某个元素是否存在于某个js数组中,相当于 PHP 语言中的in_array函数。Array.prototype.in_array=function(e){  var r=new RegExp(‘,‘+e+‘,‘);   return (r.test(‘,‘+this.join(this.S)+‘,‘)) 查看详情