Zwei Möglichkeiten, JavaScript zu verwenden, um die Fähigkeiten des CSS-Browsertyps prefix_javascript zu bestimmen

Egal wie sehr wir Browser-Typ-Präfixe hassen, wir alle müssen uns jeden Tag damit auseinandersetzen, sonst funktioniert etwas nicht richtig. Es gibt zwei Möglichkeiten, diese Präfixe zu verwenden: in CSS (z. B. „-moz-“) und in JS. Es gibt ein erstaunliches X-Tag-Projekt mit einem cleveren JavaScript-Skript, mit dem ermittelt werden kann, welches Präfix aktuell verwendet wird – ich zeige Ihnen, wie es funktioniert!

Das CSS-Präfix lautet beispielsweise „-ms-“ für IE, „-o-“ für die alte Version von Opera, „-moz-“ für Firefox und „-webkit-“ für Safari/Chrome . JavaScript bietet mehrere Möglichkeiten, sie zu ermitteln.

Methode 1: Merkmalsbeurteilung

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

Erstellen Sie ein Div, fügen Sie die Präfix-CSS-Stile -webkit-, -moz-, -o-, -ms- hinzu, rufen Sie dann den Stil ab und verwenden Sie style.xxxTransition, um zu bestimmen, um welches Präfix es sich handelt.

Methode 2: getComputedStyle ruft alle Stile von documentElement ab und analysiert sie dann

Zuerst die Stile über window.getComputedStyle abrufen und Stile in ein Array konvertieren

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

Firefox arr ist wie folgt

Chrome arr ist wie folgt

Sie können sehen, dass die von jedem Browser implementierten CSS-Präfixnamen abgerufen werden.

Verketten Sie alle Attribute zu einer Zeichenfolge und verwenden Sie dann den regulären Ausdrucksabgleich, um das Präfix

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

Wir sehen, dass Methode 2 viel weniger Code hat als Methode 1. Sowohl Methode 1 als auch Methode 2 verwenden anonyme Funktionen, um nach einmaliger Ausführung Ergebnisse zurückzugeben. Es ist nicht erforderlich, die Funktion jedes Mal aufzurufen.

Der obige Inhalt zeigt, wie der Editor zwei Methoden zur Verwendung von JavaScript zur Bestimmung des CSS-Browsertyppräfixes vorstellt. Ich hoffe, es gefällt Ihnen.