Setting vendor-prefixed CSS using javascript

javascript css vendor-prefix
Ender picture Ender · Jan 17, 2012 · Viewed 20.3k times · Source

...is a huge pain.

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 library/framework/better way to do this? Preferably with just one line of JS?

Answer

Tikhon Jelvis picture Tikhon Jelvis · Jan 17, 2012

I don't know of any library that does this, but if they are all just prefixes--that is, there is no difference in name or syntax--writing a function yourself would be trivial.

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

Then you can just use this in most cases.

Related questions

Does .css() automatically add vendor prefixes?

I have some code: $("#" + this.id).css("border-radius",this.radius + "px"); $("#" + this.id).css("-moz-border-radius",this.radius + "px"); $("#" + this.id).css("-webkit-border-radius",this.radius + "px"); I am trying to improve lines like this by using JSON to apply them (as …

Read More
Access the -webkit- vendor prefix in JavaScript

If I were writing a JavaScript line to set a style attribute of an element it could look like this (this example: "width"): document.getElementById('myDiv').style.width="50px"; and if there is a dash in the CSS element it …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More