原文地址: Detect Vendor Prefix with JavaScript
不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情。这些前缀可以用于CSS(比如 -moz-element 中的 -moz- )和JavaScript( navigator.mozApps )的格式化。牛逼的X-Tag项目使用了一个很巧妙的方法在浏览器环境中获取前缀 —— 让我们来看一下是如何实现的吧!
首先,获取HTML元素的 CSSStyleDeclaration :
var styles = window.getComputedStyle(document.documentElement, ''),
下一步,将获取到的 CSSStyleDeclaration 转换为数组对象,并且与我们已知的前缀匹配,如果没有匹配到,我们就赋值给Opera前缀:
pre = (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) )[1]
获取到了CSS前缀,JS前缀就简单的多了:
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) }
返回值是像下面形式的对象:
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元素中获取 CSSStyleDeclaration 的方法很独到。这个方法说明在样式声明里,总有一些一些带前缀的属性,虽然他们不那么找人喜欢。这个方法在未来很长一段时间都是有效的。你觉得这个方法怎么样呢?
翻译的不怎样,文章挺短,看原文体验更好(囧。。)。Ratchet项目就是用了这个方法。