Maison >interface Web >tutoriel CSS >Comment puis-je simplifier le préfixe du fournisseur CSS JavaScript ?

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

DDD
DDDoriginal
2024-12-04 02:16:101005parcourir

How Can I Simplify JavaScript CSS Vendor Prefixing?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn