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

Answer 1

For such cases there is a square bracket notation :

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

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