用JavaScript判断CSS浏览器类型前缀的方法

不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在CSS里(例如“-moz-”)和在JS里。有一个神奇的X-Tag项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的!

JavaScript

首先是获取HTML元素声明的样式:

var styles = window.getComputedStyle(document.documentElement, ''),

下一步是把这些属性转换成数组对象,搜索已知的前缀类型,如果没有发现,就缺省设置为Opera浏览器:

pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1]

发现了CSS前缀,格式化这些前缀就非常容易了:

return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  }

它返回的对象大概会是这个样子:

Object {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}

它完整的表达了当前浏览器里使用的类型前缀的信息。下面是完整的代码:

var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();

效果演示

从HTML元素上获取CSS样式信息是明智的做法。这个方法假设了这些样式里一定有类型前缀信息,但是事实未必这样,不过至少很长时间内这种方法还是好用的。你认为这种方法如何?说说你的想法!

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号