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!