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可以正常更改“转换”属性，但是如何更改其余属性呢？因为做这样的事情是行不通的：

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

因为javascript读取“ - ”作为语法错误：（

想法？

Answer 1

而不是-，请将下一个字母设为大写：style.MozTransform （就像style.backgroundColor）

请注意，IE错误地使用msTransform小写m。

Answer 2

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

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

然后你需要确保该属性适合浏览器，我强烈建议你使用像jQuery，Mootools等javascript lib，如果你赢得一些时间并防止Web开发人员在这些伟大的工具之前有一些挫败感...

Answer 3

使用jquery并只更改类

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

Answer 4

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

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

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

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

4 个答案: