JavaScript判断各浏览器CSS前缀的两种方式

不管浏览器更新的多快，号称多么支持标准。厂商不同，他们之间还是有很多差异。我们需要区分出这些差异，针对不同的浏览器做不同的处理。

比如 CSS 前缀，IE 的是 "-ms-"，旧版 Opera 的是 "-o-"，Firefox 的是 "-moz-"，Safari/Chrome 是 "-webkit-"。JavaScript 有多种方式判断它们。

 

方式1： 特性判断

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 取浏览器的 CSS 前缀 var prefix = function() {     var div = document.createElement('div');     var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';     div.style.cssText = cssText;     var style = div.style;     if (style.webkitTransition) {         return '-webkit-';     }     if (style.MozTransition) {         return '-moz-';     }     if (style.oTransition) {         return '-o-';     }     if (style.msTransition) {         return '-ms-';     }     return ''; }();

通过创建一个div，给其分别添加 -webkit-、-moz-、-o-、-ms- 的前缀 css 样式，然后获取 style，通过 style.xxxTransition 判断是哪种前缀。

 

方式2： getComputedStyle 获取 documentElement 所有样式再解析

先通过 window.getComputedStyle 获取 styles，将 styles 转成数组

?

1 2 3

var styles = window.getComputedStyle(document.documentElement, ''); var arr = [].slice.call(styles); console.log(arr);

Firefox arr 如下

Chrome arr 如下

能看到取到了具有各自浏览器自身实现的 CSS 前缀名称。

 

把所有属性连接成一个字符串，然后用正则表达式匹配就能找出前缀了

?

1 2 3 4 5 6 7 8 9 10 11

// 取浏览器的 CSS 前缀 var prefix = function() {     var styles = window.getComputedStyle(document.documentElement, '');     var core = (         Array.prototype.slice         .call(styles)         .join('')         .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])     )[1];     return '-' + core + '-'; }();

 

我们看到 方式2 较 方式1 代码量少了许多。无论是方式1 和 方式2 ，都采用匿名函数一次性执行后返回结果，不需要每次判断都调用一下函数。