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

所以我试图动态地改变与JavaScript的div的风格，这通常没什么大不了，我试图改变一些CSS3属性有一个前缀即减号（ - ）的名字......当然，这意味着一些在javascript东西完全...在JavaScript中更改浏览器特定的CSS3（前缀）属性

所以我有这个事情在我的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的读取“ - ”作为语法错误:(

想法

来源

2012-02-01 Nick

取而代之的-，使下一个字母大写：style.MozTransform
（就像style.backgroundColor）

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

来源

2012-02-01 22:39:56 SLaks

其实我相信它是'msTransform'。 – 2012-02-01 22:45:10

那么考虑到'document.body.style.MsTransform'是未定义的，'document.body.style.msTransform'是一个空字符串，我不得不说我就在这里。 – 2012-02-01 22:48:28

我错了;你是对的，但只适用于IE。 – SLaks 2012-02-01 22:49:34

在JavaScript中，您可以通过两种方法访问对象属性：点表示法或数组表示法。尤其是当你有特殊字符在属性名，使用数组表示法：

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

然后，你需要确保该财产是正确的浏览器，我强烈建议您使用JavaScript像jQuery，MooTools的LIB等等，如果你瓦纳赢得一些时间，防止有些无奈地说网络developpers之前这些伟大的工具，有...

来源

2012-02-01 22:41:07 dmidz

实际上，这是行不通的。 – SLaks 2012-02-01 22:47:08

@SLaks为什么不呢？ – 2012-02-01 22:49:15

因为Javascript属性被称为'msTransform'。这将创建一个浏览器将忽略的新属性。 – SLaks 2012-02-01 22:50:03

使用jQuery，只是改变类

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

来源

2012-02-01 22:41:07 atrueresistance

我希望我能这两次！ lulz的 – skybondsor 2012-02-01 22:58:46

... – atrueresistance 2012-02-02 01:12:31

如果你已经有了风格在线您可以忽略前缀并更改度数。元素的style.cssText是可读写的。

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

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

来源

2012-02-02 00:17:35 kennebec

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

回答

相关问题