Heim  >  Artikel  >  Web-Frontend  >  Ein sehr einfacher JS-Teil zur Bestimmung der core_javascript-Fähigkeiten des Browsers

Ein sehr einfacher JS-Teil zur Bestimmung der core_javascript-Fähigkeiten des Browsers

WBOY
WBOYOriginal
2016-05-16 16:39:311199Durchsuche

Jeder sollte sich noch daran erinnern, wie man JavaScript-Inline-Stile schreibt, oder? (Sieht so aus, als würde ich Unsinn reden!)

Während des Front-End-Entwicklungsprozesses müssen wir manchmal das Kernel-Präfix des Browsers bestimmen und verschiedene Browser unterschiedlich behandeln, damit wir dies tun können.

 alert(element.style.webkitTransition); Hiermit wird der vom Webkit vorangestellte Übergangswert abgerufen. Wenn dem Browser jedoch kein Webkit vorangestellt ist, wird undefiniert zurückgegeben. Wir können alle Kernel-Präfixe aufzählen und dann den Wert eines seiner CSS ermitteln, um ein Urteil zu fällen. Der Code lautet wie folgt:

function getVendorPrefix() {
  // 使用body是为了避免在还需要传入元素
  var body = document.body || document.documentElement,
    style = body.style,
    vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
    i = 0;

  while (i < vendor.length) {
    // 此处进行判断是否有对应的内核前缀
    if (typeof style[vendor[i] + 'Transition'] === 'string') {
      return vendor[i];
    }
    i++;
  }
}

Dann müssen Sie nur getVendorPrefix() aufrufen, um das Kernel-Präfix des Browsers zu erfahren. Wenn undefiniert zurückgegeben wird, beweist dies, dass der Browser keine CSS3-Attribute unterstützt, d. h. es gibt kein Kernel-Präfix.

Jeder sollte wissen, dass wir beim Schreiben von Code CSS anstelle von JavaScript schreiben können, als wenn wir selbst JS schreiben würden Für ein einfaches Bildkarussell können wir beispielsweise den Übergang von CSS3 oder die Animation von jQuery verwenden oder selbst nativen Code schreiben, aber die Leistung von CSS3 ist definitiv höher, sodass wir zwei Codesätze schreiben können. Für Browser, die CSS3 unterstützen Wenn dies nicht unterstützt wird, verwenden Sie eine Animation. Wenn dies nicht unterstützt wird, verwenden Sie einen Timer oder eine Animation. Auf diese Weise kann eine bessere Benutzererfahrung erzielt werden.

Das Obige ist die Plug-in-Erfahrung von jquery.slides.js. Wenn es eine bessere Methode gibt, informieren Sie bitte den Autor.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn