JavaScript判斷各瀏覽器CSS前綴的兩種方式

無論瀏覽器更新的多快，號稱多麼支持標準。廠商不一樣，他們之間仍是有不少差別。咱們須要區分出這些差別，針對不一樣的瀏覽器作不一樣的處理。

好比 CSS 前綴，IE 的是 "-ms-"，舊版 Opera 的是 "-o-"，Firefox 的是 "-moz-"，Safari/Chrome 是 "-webkit-"。JavaScript 有多種方式判斷它們。

 

方式1： 特性判斷

// 取瀏覽器的 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 轉成數組

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

Firefox arr 以下

Chrome arr 以下

能看到取到了具備各自瀏覽器自身實現的 CSS 前綴名稱。

 

把全部屬性鏈接成一個字符串，而後用正則表達式匹配就能找出前綴了

// 取瀏覽器的 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 ，都採用匿名函數一次性執行後返回結果，不須要每次判斷都調用一下函數。