JavaScript を使用して CSS ブラウザのタイプを判断する 2 つの方法 prefix_javascript スキル

ブラウザの種類のプレフィックスがどれほど嫌いであっても、私たちは皆、毎日それに直面しなければなりません。そうしないと、何かが正しく動作しません。これらの接頭辞を使用するには、CSS (「-moz-」など) と JS で使用する 2 つの方法があります。現在使用されているプレフィックスを判断するために使用できる、賢い JavaScript スクリプトを備えた素晴らしい X-Tag プロジェクトがあります。どのように機能するかを説明しましょう。

たとえば、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.xxxTransition を使用してどのプレフィックスであるかを決定します。

メソッド 2: getComputedStyle は documentElement のすべてのスタイルを取得し、それらを解析します

まず window.getComputedStyle を通じてスタイルを取得し、スタイルを配列に変換します

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 は両方とも、匿名関数を使用して 1 回の実行後に結果を返します。毎回関数を呼び出す必要はありません。

上記の内容は、JavaScript を使用して CSS ブラウザーの種類のプレフィックスを決定する 2 つの方法をエディターが紹介するものです。気に入っていただければ幸いです。