不管我們對瀏覽器類型前綴有多么的討厭，我們都不得不每天面對它，否者有些東西不能正常工作。這些前綴的用法有兩種：在CSS里(例如“-moz-”)和在JS里。有一個神奇的 X-Tag 項目里有一段很聰明的JavaScript腳本，可以用來判斷當前使用的是什么前綴――讓我來展示它是如何工作的！
比如 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 ，都采用匿名函數一次性執行后返回結果，不需要每次判斷都調用一下函數。
以上內容就是小編通過兩種方法給大家介紹的用JavaScript判斷CSS瀏覽器類型前綴，希望大家喜歡。
新聞熱點
疑難解答
