Comment puis-je appliquer efficacement les préfixes de fournisseur aux propriétés CSS avec JavaScript ?

Définition du CSS avec préfixe du fournisseur à l'aide de Javascript

L'application manuelle des préfixes du fournisseur aux propriétés CSS peut être fastidieuse. L'extrait de code fourni illustre ce processus pour la propriété transform :

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

Existe-t-il un moyen plus efficace d'y parvenir, de préférence avec une seule ligne de JavaScript ?

Solution

Bien qu'il n'existe pas de bibliothèque connue qui effectue cette tâche, la création d'une fonction personnalisée est simple puisque les préfixes des fournisseurs sont cohérents dans leur syntaxe et leurs noms.

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Cette fonction peut puis être utilisé pour définir les propriétés préfixées par le fournisseur :

setVendor(elem, 'transform', 'translate3d(0,0,0)');

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!