标签：amp 使用 mat get var 缺省 两种 element cas
不管我们对浏览器类型前缀有多么的讨厌，我们都不得不每天面对它，否者有些东西不能正常工作。这些前缀的用法有两种：在CSS里(例如“-moz-”)和在JS里。有一个神奇的X-Tag项目里有一段很聪明的JavaScript脚本，可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的！
该函数返回的对象大概会是这个样子
Object {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}
var styles = window.getComputedStyle(document.documentElement, "");
// 下一步是把这些属性转换成数组对象，搜索已知的前缀类型，如果没有发现，就缺省设置为Opera浏览器：
var pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === ‘‘ && [‘‘, ‘o‘]))[1];
// 它完整的表达了当前浏览器里使用的类型前缀的信息。下面是完整的代码：
var prefix = (function(){
var styles = window.getComputedStyle(document.documentElement, "");
var pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === ‘‘ && [‘‘, ‘o‘]))[1];
var 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)
}
}());
console.log(prefix); // {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}
从HTML元素上获取CSS样式信息是明智的做法。这个方法假设了这些样式里一定有类型前缀信息，但是事实未必这样，不过至少很长时间内这种方法还是好用的。
标签：amp 使用 mat get var 缺省 两种 element cas
原文地址：http://www.cnblogs.com/alantao/p/7942008.html
