Changing a css attribute starting with a dash using Javascript

Question

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.

Community · Accepted Answer · 2017-05-23 11:49:34Z

3

Refer to this question:

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

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jun 18, 2014 at 3:50

arielnmz

9,21510 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Coder · Accepted Answer · 2014-06-18 03:49:59Z

2

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

answered Jun 18, 2014 at 3:49

Joe Coder

4,56534 silver badges45 bronze badges

Comments

user3750298 · Accepted Answer · 2014-06-18 03:50:48Z

2

You can use .setAttribute():

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

answered Jun 18, 2014 at 3:50

user3750298

1 Comment

Joe Coder Over a year ago

This will overwrite any other space-separated terms in the style attribute value.

Collectives™ on Stack Overflow

Changing a css attribute starting with a dash using Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related