Préfixation du fournisseur avec javascript

Les éléments avec CSS à l'aide de JavaScript peuvent être fastidieux, surtout lorsque vous traitez avec les préfixes du fournisseur. L'approche traditionnelle consiste à définir manuellement chaque propriété préfixée, comme on le voit dans le bloc de code:

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

une solution simplifiée

pour simplifier ce processus, une fonction personnalisée peut être créée:

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 prend trois paramètres: l'élément à style, la propriété à définir et la valeur souhaitée. It iterates through the supported prefixes and sets the appropriate styles.

Usage

Using the setVendor function, the code block above can be simplified to:

setVendor(elem, "Transform", transform);

Cette ligne de code unique applique efficacement le style de transformation avec toutes les préfixes du fournisseur nécessaire, faisant du style un jeu d'enfant.