使用Javascript更改以破折号开头的css属性

Question

我试图使用通过javascript更改css属性的ussual方法。问题是基于webkit的属性以破折号开头，使javascript无效。

document.getElementById('circle1').style.-webkit-animation = 'upDown 15s infinite';

如何修改此代码才有效。

Answer 1

参考to this question：

test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
test.style.webkitAnimationDuration = '4s';

Answer 2

document.getElementById('circle1').style['-webkit-animation'] = 'upDown 15s infinite';

Answer 3

您可以使用.setAttribute()：

document.getElementById('circle1').setAttribute("style", "-webkit-animation: upDown 15s infinite");