I'm trying to use the ussual method of changing a css property with javascript. The problem is that the webkit based attributes start with a dash making the javascript invalid.
document.getElementById('circle1').style.-webkit-animation = 'upDown 15s infinite';
How can I modify this code to be valid.
I'm trying to use the ussual method of changing a css property with javascript. The problem is that the webkit based attributes start with a dash making the javascript invalid.
document.getElementById('circle1').style.-webkit-animation = 'upDown 15s infinite';
How can I modify this code to be valid.
Share Improve this question asked Jun 18, 2014 at 3:46 Philip KirkbridePhilip Kirkbride 22.9k39 gold badges131 silver badges237 bronze badges 03 Answers
Reset to default 3Refer to this question:
test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
test.style.webkitAnimationDuration = '4s';
document.getElementById('circle1').style['-webkit-animation'] = 'upDown 15s infinite';
You can use .setAttribute():
document.getElementById('circle1').setAttribute("style", "-webkit-animation: upDown 15s infinite");