如何使用JavaScript动态设置样式-webkit-transform？

Question

我想-webkit-transform: rotate()动态地使用JavaScript 更改属性,但常用的setAttribute不起作用:

img.setAttribute('-webkit-transform', 'rotate(60deg)');

这.style也不起作用......

如何在JavaScript中动态设置它？

Answer 1

JavaScript样式名称是WebkitTransformOrigin和WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

在此处检查WebKit的DOM扩展参考.

Answer 2

以下是大多数常见供应商的JavaScript表示法:

webkitProperty
MozProperty
msProperty
OProperty
property

我重置内联变换样式,如:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

像这样使用jQuery:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

请参阅博客文章使用JavaScript编码供应商前缀(2012-03-21).

Answer 3

尝试使用

img.style.webkitTransform = "rotate(60deg)"

Answer 4

如果您想通过这样做，setAttribute您可以style像这样更改属性：

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

如果您想重置所有其他内联样式并且只再次设置您需要的样式属性的值，这将很有帮助，但在大多数情况下您可能不想要那样。这就是为什么每个人都建议使用这个：

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

以上等价于

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';