Access the -webkit- vendor prefix in JavaScript
Solution 1
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.
Solution 2
One possibility would to use for example jquery, to make it easy. If you want a pure javascript solution, then read this: http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Solution 3
If you don't want to keep digging up those pesky style properties and their naming conventions you can always use jQuery to keep it simple.
$('#myDiv').css("-webkit-transition", "value");
Comments
-
lindhe almost 2 years
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;}
-
Admin almost 10 yearsThanks for the answer! This article suggests a similar syntax, but why isn't the fist letter in
msTransform
capitalized?