How to add webkit style dynamically in Javascript.

Sometimes the property names for dynamically changing an element’s style is not as obvious as it seems. So how can you add WebKit style dynamically in JavaScript?

This is made relatively simple as these are the names for the WebKit related properties:

To set the style dynamically use property webkitTransform:
element.style.webkitTransform = "rotate(50deg) translateX(100px)";
Or alternatively:
element.style["transform"] = "rotate(50deg)";
element.style["-webkit-transform"] = "rotate(50deg)";

This can also be achieved using setAttribute:

element.setAttribute(
  "style",
  "transform:rotate(50deg); -webkit-transform: rotate(90deg)"
);

Gareth Dunne

Senior JavaScript Engineer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.