Vendor, die mit JavaScript

Elemente mit CSS unter Verwendung von JavaScript vorangestellt werden, kann mühsam sein, insbesondere wenn sie mit den Präfixen von Lieferanten zu tun haben. Der traditionelle Ansatz beinhaltet die manuelle Einstellung jeder vorangestellten Eigenschaft, wie im Code -Block 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 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 nimmt drei Parameter: das Element zum Stil, die Eigenschaft und den gewünschten Wert. Es iteriert die unterstützten Präfixe und legt die entsprechenden Stile fest.

useage

unter Verwendung der SetVendor -Funktion können der obige Codeblock vereinfacht werden:

setVendor(elem, "Transform", transform);

Diese einzelne Codezeile wendet den Transformationsstil effektiv mit allen notwendigen Anbieter -Präfixen an, wobei das Styling eine Brise macht.