How to iterate over object with css properties and assign to style attribute?

Question

this is probably ver simple but I cannot figure it out.

how can I assign the objects values to the buttons style atribute in the for loop below?

(function(){
    var parent = {
        color: "orange",
        width: "50px",
        height: "50px"
    }, 
        child = Object.create(parent),
        button = document.querySelector("button");

    button.onclick = function(){
        for (var test in child) {
            button.style.test = // ??
        }
    }

})();

thanks in advance

VisioN · Accepted Answer · 2014-05-07 11:32:45Z

4

For such cases there is a square bracket notation:

button.style[test] = child[test];

MORE: http://www.javascripttoolbox.com/bestpractices/#squarebracket

answered May 7, 2014 at 11:32

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

5 Comments

Scimonster Over a year ago

Just beat me to it. ;)

adeneo Over a year ago

This is one of those "if only it was jQuery" questions, button.css(parent) would do!

Ejaz Over a year ago

I was just wondering why hasOwnProperty isn't needed in this example. Is it because of Object.create?

adeneo Over a year ago

@Ejay If you're certain of what your objects contain, you rarely need that.

Stereo99 Over a year ago

this is exactly what i needed .. thanks for the fast response!

Collectives™ on Stack Overflow

How to iterate over object with css properties and assign to style attribute?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related