Access the -webkit- vendor prefix in JavaScript

javascript css webkit vendor-prefix
lindhe picture lindhe · Feb 24, 2012 · Viewed 11.8k times · Source

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 would look like this (this example: "margin-top"):

document.getElementById('myDiv').style.marginTop="15px";

But how do I access the prefix -webkit-, if I want to give it a style like this example:

{-webkit-transition: width 1s;}

Answer

pimvdb picture pimvdb · Feb 24, 2012

You have two options:

  • style["-webkit-transition"]
  • style.WebkitTransition

The first directly works. The second notation is called camel case, and foo-bar-baz becomes fooBarBaz. As a result, when a non camel case string starts with -, the first letter is capitalized in camel case.

Related questions

How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More
Webkit-based blurry/distorted text post-animation via translate3d

This issue appears to affect all WebKit-based browsers, including the iPhone. First some background. The site I'm working on uses a JavaScript-based 'slider' animation. I'm using -webkit-transform: translate3d to 'power' the actual animation. When using this method, as opposed …

Read More
Extract the current DOM and print it as a string, with styles intact

I'd like to be able to take my DOM, as is, and convert it to a string. Let's say I open up the inspector and make a change to the margin-left property of a particular element. That change should be …

Read More