在JavaScript中更改特定于浏览器的CSS3（前缀）属性

Question

我正在尝试使用JavaScript动态更改div的样式，这通常不是什么大问题，但是我正在尝试更改一些带有前缀（即在名称中带有减号（-））的CSS3属性…当然，在JavaScript中这意味着完全不同的东西...

所以，我的JavaScript代码如下：

r += 1;
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

我的 div 的样式属性如下：

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

JavaScript可以很好地改变"transform"属性，但我该如何改变其他属性呢？因为像这样做是不起作用的：

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

由于JavaScript将“-”视为语法错误，因此需要解决此问题。有何想法？

- Nick Briz

Answer 1

不要使用-，而是把下一个字母大写： style.MozTransform。（就像style.backgroundColor一样）

请注意，IE不正确地使用小写的m来表示msTransform。

- SLaks

---

实际上，我相信应该是 msTransform。 - Niet the Dark Absol

鉴于 document.body.style.MsTransform 未定义且 document.body.style.msTransform 是空字符串，我必须在这里说我是正确的。 - Niet the Dark Absol

啊，太棒了！非常感谢！我还没有在IE或Opera上尝试过，但这似乎在Chrome、Safari和FireFox上运行得很好 :) - Nick Briz

Answer 2

在JavaScript中，你可以通过两种方式访问对象属性：点符号或数组符号。特别是当属性名称中有特殊字符时，请使用数组符号：

document.getElementById('someDiv').style['-ms-transform'] = "rotate(" + r + "deg)";

接下来，您需要确保该属性适合浏览器，我强烈建议您使用JavaScript库，如jQuery、Mootools等，如果您想节省时间并防止Web开发人员在这些伟大工具之前遇到的一些挫败感...

- dmidz

---

因为Javascript属性被称为msTransform，这将创建一个新的属性，浏览器会忽略它。 - SLaks

Answer 3

使用jQuery，只需更改类

 $("p").removeClass("myClass noClass").addClass("yourClass");

- atrueresistance

---

我希望我能够将其提高两倍！ - skybondsor

Answer 4

如果您已经有了样式inline，则可以忽略前缀并更改度数。 元素的style.cssText是可读写的。

var sty=document.getElementById('someDiv').style;

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');

- kennebec