一段非常简单的js判断浏览器的内核_javascript技巧

  大家应该还记得JavaScript行内样式怎么写吧?(看来我是废话了!)

  在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做。

  alert(element.style.webkitTransition); 这个是获取以webkit为前缀的transition值。但如果不是webkit为前缀的浏览器,则会返回undefined。而我们可以将所有的内核前缀给枚举出来,然后获取其某个CSS的值,即可做出判断。代码如下:

function getVendorPrefix() {
  // 使用body是为了避免在还需要传入元素
  var body = document.body || document.documentElement,
    style = body.style,
    vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
    i = 0;

  while (i < vendor.length) {
    // 此处进行判断是否有对应的内核前缀
    if (typeof style[vendor[i] + 'Transition'] === 'string') {
      return vendor[i];
    }
    i++;
  }
}

  然后只需要调用getVendorPrefix()即可知道浏览器的内核前缀,如果返回undefined则证明浏览器不支持CSS3属性,即没有内核前缀。

  大家应该知道,我们在写代码的过程中,能写CSS就不写JavaScritp,毕竟CSS的性能会比自己写JS的高一些,因此,我们在开发一些实际应该中,会用到transition,比如一个简单的图片轮播,我们可以使用CSS3的transition,也可以使用jQuery的animate或自己写原生,但CSS3的性能肯定会高一些,因此我们可以写两套代码,对于支持CSS3的浏览器则使用animation,而不支持的则使用计时器或animate。这样的话能够获取更好的用户体验。

  以上是看jquery.slides.js的插件心得,如有更好的方法,请一定告知笔者。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
判断浏览器
javascript内核、javascript内核系列、ie内核浏览器、浏览器内核、webkit内核的浏览器,以便于您获取更多的相关知识。

时间: 2024-08-27 23:48:42

一段非常简单的js判断浏览器的内核_javascript技巧的相关文章

分享两段简单的JS代码防止SQL注入_javascript技巧

1.URL地址防注入: //过滤URL非法SQL字符 var sUrl=location.search.toLowerCase(); var sQuery=sUrl.substring(sUrl.indexOf("=")+1); re=/select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i; if(re.test(sQuery)) { alert("请勿

js判断浏览器是否支持html5_javascript技巧

现在HTML5似乎慢慢流行起来了,有些前端高手为了兼容考虑,会在网页中添加对客户端浏览器判断的代码,知道用户浏览器是否支持HTML5,下面分享想我自己使用的2种方法 方法一, <script> function checkhHtml5() { if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert("不支持HTML5"); } } </scri

简单的JS轮播图代码_javascript技巧

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

编写跨浏览器的javascript代码必备[js多浏览器兼容写法]_javascript技巧

序号 操作 分类 IE(6.0) FireFox(2.0) Mozilla(1.5) 当前浏览器 备注 1 "." 访问tag的固有属性 OK OK OK OK 2 "." 访问tag的用户定义属性eg: <input type="checkbox" myattr="test"> OK NO NO OK 可以用getAttribute函数 替代 3 obj.getAttribute 访问tag的固有属性 OK OK

JS实现浏览器菜单命令_javascript技巧

序:用js实现菜单命令虽然在技术上讲没什么,不过这个算是比较全了.      每当我们看到别人网页上的打开.打印.前进.另存为.后退.关闭本窗口.禁用右键等实现浏览器命令的链接,而自己苦于不能实现时,是不是感到很遗憾?是不是也想实现?如果能在网页上能实现浏览器的命令,将是多么有意思的事啊!下面我们就来看看如何用Javascript代码实现浏览器菜单命令(以下代码在Windows XP下的浏览器中调试通过). 一.[文件(F)]菜单中的命令的实现 1.[打开]命令的实现 [格式]:document

简单实现JS对dom操作封装_javascript技巧

这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

JS 判断代码全收集_javascript技巧

/*$#################################################$*/ /* 程序功能:输入验证 */ /* 函数名称: */ /* function CheckData(valname,val,valimode,limitlen) */ /* 功能说明:验证字符串数据 */ /* function CheckUserName(val,min,max) */ /* 功能说明:验证用户名 */ /* function CheckPassWord(val,mi

自定义的一个简单时尚js下拉选择框_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS判断浏览器是否安装flash插件的简单方法_javascript技巧

1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })();  chrome: Edge浏览器中取消了win