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

因此，我试图用javascript动态更改div的样式，这通常没什么大不了的，只是我试图更改一些带有前缀的CSS3属性，即名称中的负（-）。。。当然，这在javascript中完全意味着其他东西

因此，我在javascript中实现了这一点：

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

my div的style属性如下所示：

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将“-”读取为语法错误：(

---

想法？

将下一个字母改为大写：

style.MozTransform

（就像

style.backgroundColor

）

---

请注意，IE错误地将

msTransform

与小写的

m

一起使用，在javascript中，可以通过两种方式访问对象属性：点表示法或数组表示法。特别是当属性名中有特殊字符时，请使用数组表示法：

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

---

然后，您需要确保该属性适用于浏览器，我强烈建议您使用javascript库，如jQuery、Mootools等，如果您想赢得一些时间，并避免web开发人员在使用这些伟大工具之前遇到的挫折…

使用jQuery，只需更改类即可

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

---

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

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

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

---

事实上，我相信它是

msTransform

。考虑到

document.body.style.msTransform

是未定义的，

document.body.style.msTransform

是一个空字符串，我不得不说我就在这里。啊，是的，太棒了！非常感谢！我还没有尝试过IE或Opera，但这在Chrome、Safari和FireFox上似乎效果很好：）因为Javascript属性被称为

msTransform

。这将创建一个浏览器将忽略的新属性。我希望我能将此设置两次！