一段非常简单的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动画效果类封装代码
Aug 28 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
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
CodeIgniter框架URL路由总结
2014/09/03 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
javascript Keycode对照表
2009/10/24 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python生成随机数组的方法小结
2017/04/15 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
弘扬民族精神演讲稿
2014/05/07 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
员工评语范文
2014/12/31 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
六年级作文之预言作文
2019/10/25 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript