Un morceau de js très simple pour déterminer les compétences core_javascript du navigateur

Tout le monde devrait encore se rappeler comment écrire des styles en ligne JavaScript, n'est-ce pas ? (On dirait que je dis des bêtises !)

Au cours du processus de développement front-end, nous devons parfois déterminer le préfixe du noyau du navigateur et gérer différemment les différents navigateurs, afin de pouvoir le faire.

　alert(element.style.webkitTransition); Ceci permet d'obtenir la valeur de transition préfixée par webkit. Mais si le navigateur n'est pas préfixé par webkit, undefined sera renvoyé. Nous pouvons énumérer tous les préfixes du noyau, puis obtenir la valeur de l'un de ses CSS pour porter un jugement. Le code est le suivant :

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++;
  }
}

Ensuite, il vous suffit d'appeler getVendorPrefix() pour connaître le préfixe du noyau du navigateur. Si undefined est renvoyé, cela prouve que le navigateur ne prend pas en charge les attributs CSS3, c'est-à-dire qu'il n'y a pas de préfixe de noyau.

Tout le monde devrait savoir que lorsque nous écrivons du code, nous pouvons écrire du CSS au lieu de JavaScript. Après tout, les performances du CSS seront supérieures à celles de l'écriture de JS par nous-mêmes. Par conséquent, nous utiliserons la transition pour développer certaines applications pratiques. Par exemple, pour un simple carrousel d'images, nous pouvons utiliser la transition de CSS3, l'animation de jQuery ou écrire du code natif nous-mêmes, mais les performances de CSS3 seront certainement plus élevées, nous pouvons donc écrire deux ensembles de codes pour les navigateurs prenant en charge CSS3 si c'est le cas. n'est pas pris en charge, utilisez une animation, et si elle n'est pas prise en charge, utilisez une minuterie ou une animation. De cette façon, une meilleure expérience utilisateur peut être obtenue.

Ce qui précède est l'expérience du plug-in de jquery.slides.js. S'il existe une meilleure méthode, veuillez en informer l'auteur.