Comment puis-je simplifier le préfixe du fournisseur CSS JavaScript ?

Préfixe de fournisseur avec JavaScript

Styler des éléments avec CSS à l'aide de JavaScript peut être fastidieux, en particulier lorsqu'il s'agit de préfixes de fournisseur. L'approche traditionnelle consiste à définir manuellement chaque propriété préfixée, comme le montre 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éé :

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 à styliser, la propriété à définir et la valeur souhaitée. Il parcourt les préfixes pris en charge et définit les styles appropriés.

Utilisation

À l'aide de la fonction setVendor, le bloc de code ci-dessus peut être simplifié en :

setVendor(elem, "Transform", transform);

Cette seule ligne de code applique efficacement le style de transformation avec tous les préfixes de fournisseur nécessaires, ce qui rend le style un jeu d'enfant.

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!