How to add webkit style dynamically in Javascript.

21 April 2020

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:

• WebkitTransformOrigin
• WebkitTransformTo 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)"
);