Applying styles in javascript with a for-in loop

Question

So I have an object full of key-value pairs that describe the intended style of an element and I am trying to apply that style to an element by looping through the object like this:

element = document.createElement('div');   
style = {width : '220px', height : '100%', left : '0', height : '0', position : 'relative'}
for (x in style){
    element.style.x = style[x];
}

And yet the element remains without a style. This seems so simple that I cannot figure out what might be going wrong,so I assume I am missing something incredibly obvious. Thank you for any help you can provide.

Jeremy · Accepted Answer · 2011-08-22 17:26:44Z

4

You are setting the property x on each iteration. Instead, use the value of x like so:

element.style[x] = style[x];

edited Aug 22, 2011 at 17:26

answered Aug 22, 2011 at 16:48

Jeremy

22.5k4 gold badges71 silver badges82 bronze badges

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

Comments

jfriend00 · Accepted Answer · 2011-08-22 16:49:26Z

0

Change to this:

element = document.createElement('div');   
style = {width : '220px', height : '100%', left : '0', height : '0', position : 'relative'}
for (x in style){
    element.style[x] = style[x];
}

answered Aug 22, 2011 at 16:49

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

Applying styles in javascript with a for-in loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related