一段非常简单的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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
js操作select控件的几种方法
Jun 02 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
javaScript中indexOf用法技巧
Nov 26 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
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jquery实现拖动效果
2016/08/10 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
机械专业应届生求职信
2013/12/12 职场文书
学校十一活动方案
2014/02/01 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
酒店员工手册范本
2015/05/14 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
Python如何用re模块实现简易tokenizer
2022/05/02 Python