Comment puis-je automatiser les affectations CSS préfixées par le fournisseur en JavaScript ?

Automatisation des attributions CSS préfixées par le fournisseur en JavaScript

Les développeurs JavaScript sont souvent confrontés à la tâche fastidieuse consistant à appliquer manuellement les préfixes du fournisseur aux propriétés CSS. Pour illustrer cela, considérons le code suivant qui traduit un élément dans l'espace 3D :

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

Bien que cette approche garantisse la compatibilité avec plusieurs navigateurs, elle devient de plus en plus lourde à mesure que le nombre de propriétés augmente. Pour rationaliser ce processus, envisagez la stratégie suivante :

Fonction JavaScript personnalisée

En l'absence d'une bibliothèque qui effectue automatiquement le préfixe du fournisseur, vous pouvez créer votre propre fonction pour gérer cette tâche. Par exemple, vous pouvez définir une fonction appelée setVendor comme suit :

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 arguments : l'élément auquel appliquer le style, la propriété CSS (sans préfixe du fournisseur) et la valeur à appliquer. ensemble. En appelant cette fonction, vous pouvez appliquer des styles préfixés par le fournisseur avec une seule ligne de code :

setVendor(element, 'Transform', 'translate3d(0,0,0)');

Cette approche simplifie le processus d'application des préfixes du fournisseur en éliminant le besoin d'attribution explicite de propriétés pour chaque fournisseur.

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!