在JavaScript中访问-webkit- vendor前缀

Question

如果我正在编写一个JavaScript行来设置元素的样式属性，它可能看起来像这样（这个例子：“width”）：

document.getElementById('myDiv').style.width="50px";

如果CSS元素中有破折号，它将看起来像这样（这个例子：“margin-top”）：

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

但是，如果我想给它一个像这个例子的样式，我如何访问前缀-webkit-：

{-webkit-transition: width 1s;}

Answer 1

您有两种选择：

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

第一个直接起作用。第二种表示法称为驼峰案例，foo-bar-baz变为fooBarBaz。因此，当非驼峰大小写字符串以-开头时，第一个字母在驼峰大小写中大写。

Answer 2

如果您不想继续挖掘那些讨厌的样式属性及其命名约定，您可以随时使用jQuery来保持简单。

$('#myDiv').css("-webkit-transition", "value");

Answer 3

一种可能性就是使用例如jquery来简化它。 如果你想要一个纯粹的JavaScript解决方案，那么请阅读： http://www.javascriptkit.com/javatutors/setcss3properties.shtml