How Can I Efficiently Apply Vendor Prefixes to CSS Properties with JavaScript?

Setting Vendor-Prefixed CSS using Javascript

Manually applying vendor prefixes to CSS properties can be tedious. The provided code snippet demonstrates this process for the transform property:

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

Is there a more efficient way to achieve this, preferably with a single line of JavaScript?

Solution

While there isn't a known library that performs this task, creating a custom function is straightforward since vendor prefixes are consistent in their syntax and names.

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 can then be used to set vendor-prefixed properties:

setVendor(elem, 'transform', 'translate3d(0,0,0)');

The above is the detailed content of How Can I Efficiently Apply Vendor Prefixes to CSS Properties with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!