Wie kann ich die Präfixierung von JavaScript-CSS-Anbietern vereinfachen?

Anbieterpräfixe mit JavaScript

Elemente mit CSS mithilfe von JavaScript zu gestalten, kann mühsam sein, insbesondere wenn es um Herstellerpräfixe geht. Der traditionelle Ansatz beinhaltet das manuelle Festlegen jeder Präfixeigenschaft, wie im Codeblock zu sehen ist:

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

Eine vereinfachte Lösung

Um diesen Prozess zu vereinfachen, kann eine benutzerdefinierte Funktion verwendet werden erstellt werden:

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;
}

Diese Funktion benötigt drei Parameter: das zu formatierende Element, die festzulegende Eigenschaft und den gewünschten Wert. Es durchläuft die unterstützten Präfixe und legt die entsprechenden Stile fest.

Verwendung

Mit der setVendor-Funktion kann der obige Codeblock wie folgt vereinfacht werden:

setVendor(elem, "Transform", transform);

Diese einzelne Codezeile wendet den Transformationsstil effektiv mit allen erforderlichen Herstellerpräfixen an und macht das Styling zum Kinderspiel.

Das obige ist der detaillierte Inhalt vonWie kann ich die Präfixierung von JavaScript-CSS-Anbietern vereinfachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!