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

　　大家应该还记得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智能判断浏览器是关闭还是刷新的代码
• js判断横竖屏及禁止浏览器滑动条示例
• javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
• js监控IE火狐浏览器关闭、刷新、回退、前进事件
• JS辨别访问浏览器判断是android还是ios系统
• js/jquery判断浏览器的方法小结
• JS判断浏览器是否支持某一个CSS3属性的方法
• 封装好的js判断操作系统与浏览器代码分享
• 用js判断是否为360浏览器的实现代码
• js判断浏览器版本以及浏览器内核的方法
• JS判断是否360安全浏览器极速内核的方法
• 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)