Vendor Prefixing with JavaScript

Styling elements with CSS using JavaScript can be tedious, especially when dealing with vendor prefixes. The traditional approach involves manually setting each prefixed property, as seen in the code block:

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

A Simplified Solution

To simplify this process, a custom function can be created:

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

This function takes three parameters: the element to style, the property to set, and the desired value. It iterates through the supported prefixes and sets the appropriate styles.

Usage

Using the setVendor function, the code block above can be simplified to:

setVendor(elem, "Transform", transform);

This single line of code effectively applies the transform style with all necessary vendor prefixes, making styling a breeze.