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

【问题标题】：changing browser specific CSS3 (prefix) properties in JavaScript在 JavaScript 中更改浏览器特定的 CSS3（前缀）属性
【发布时间】：2012-02-01 22:38:07
【问题描述】：

所以我尝试使用 javascript 动态更改 div 的样式，这通常没什么大不了的，只是我尝试更改一些具有前缀的 CSS3 属性，即名称中的减号 (-)。 .. 当然，这意味着完全在 javascript 中的其他东西...

所以我在我的 javascript 中进行了此操作：

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

我的 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 可以很好地更改“转换”属性，但我将如何更改其余部分？因为这样做是行不通的：

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

因为 javascript 将“-”读取为语法错误:(

想法？

【问题讨论】：

标签： javascript css coding-style cross-browser prefix

【解决方案1】：

代替-，将下一个字母变为大写：style.MozTransform。
（就像style.backgroundColor）

请注意，IE 错误地将 msTransform 与小写的 m 一起使用。

【讨论】：

其实我相信是msTransform。
鉴于document.body.style.MsTransform 是未定义的并且document.body.style.msTransform 是一个空字符串，我不得不说我就在这里。
啊，是的，太棒了！非常感谢！我没有在 IE 或 Opera 上尝试过，但这似乎在 Chrome、Safari 和 FireFox 上运行良好:)

【解决方案2】：

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

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

然后您需要确保该属性适合浏览器，如果您想赢得一些时间并防止 Web 开发人员在使用这些出色的工具之前遇到一些挫败感，我强烈建议您使用 jQuery、Mootools 等 javascript 库...

【讨论】：

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

【解决方案3】：

使用 jquery 并更改类

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

【讨论】：

我希望我能两次！

【解决方案4】：

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

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

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

【讨论】：