用JavaScript判斷CSS瀏覽器類型前綴的兩種方法_javascript技巧-js教程-PHP中文網

用JavaScript判斷CSS瀏覽器類型前綴的兩種方法_javascript技巧

WBOY

發布： 2016-05-16 15:37:17

原創

1126 人瀏覽過

不管我們對瀏覽器類型前綴有多麼的討厭，我們都不得不每天面對它，否者有些東西不能正常工作。這些字首的用法有兩種：在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瀏覽器類型前綴，希望大家喜歡。