Dua cara untuk menggunakan JavaScript untuk menentukan kemahiran prefix_javascript jenis pelayar CSS

Tidak kira betapa kita benci awalan jenis penyemak imbas, kita semua perlu menghadapinya setiap hari, jika tidak, sesuatu tidak akan berfungsi dengan betul. Terdapat dua cara untuk menggunakan awalan ini: dalam CSS (seperti "-moz-") dan dalam JS. Terdapat projek X-Tag yang menakjubkan dengan skrip JavaScript yang bijak yang boleh digunakan untuk menentukan awalan yang sedang digunakan - izinkan saya menunjukkan kepada anda cara ia berfungsi!

Sebagai contoh, awalan CSS ialah "-ms-" untuk IE, "-o-" untuk versi lama Opera, "-moz-" untuk Firefox dan "-webkit-" untuk Safari/Chrome . JavaScript mempunyai beberapa cara untuk menentukannya.

Kaedah 1: Penghakiman Ciri

// 取浏览器的 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 '';
}();

Buat div, tambah -webkit-, -moz-, -o-, -ms- awalan gaya css padanya, kemudian dapatkan gaya dan gunakan style.xxxTransition untuk menentukan awalan itu.

Kaedah 2: getComputedStyle mendapat semua gaya documentElement dan kemudian menghuraikannya

Mula-mula dapatkan gaya melalui window.getComputedStyle dan tukar gaya kepada tatasusunan

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

Firefox arr adalah seperti berikut

Arr Chrome adalah seperti berikut

Anda boleh melihat bahawa nama awalan CSS yang dilaksanakan oleh setiap penyemak imbas diperoleh.

Sambungkan semua atribut ke dalam rentetan, kemudian gunakan padanan ungkapan biasa untuk mencari awalan

// 取浏览器的 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 + '-';
}();

Kami melihat bahawa kaedah 2 mempunyai kod yang jauh lebih sedikit daripada kaedah 1. Kedua-dua Kaedah 1 dan Kaedah 2 menggunakan fungsi tanpa nama untuk mengembalikan hasil selepas pelaksanaan satu kali Tidak perlu memanggil fungsi setiap kali.

Kandungan di atas ialah cara editor memperkenalkan dua kaedah untuk menggunakan JavaScript untuk menentukan awalan jenis pelayar CSS saya harap anda menyukainya.