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


Posted in Javascript onAugust 17, 2014

大家应该还记得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的插件心得,如有更好的方法,请一定告知笔者。

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
jquery 学习笔记一
Apr 07 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 #Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 #Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 #Javascript
Node.js中的事件驱动编程详解
Aug 16 #Javascript
Node.js文件操作详解
Aug 16 #Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 #Javascript
Node.js中创建和管理外部进程详解
Aug 16 #Javascript
You might like
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python配置mysql的教程(推荐)
2017/10/13 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
宿舍违规用电检讨书
2014/02/16 职场文书
总经理任命书
2014/03/29 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android