jquery .css() won't set multiple properties programmatically -

this works:

var property1 = "width";  $('.button1').on("click", function(){     $('.greenbox').css(property1, "200px"); }); 

but doesn't:

var property1 = "width"; var property2 = "border-top";  $('.button2').on("click", function(){     $('.greenbox').css({         property1: "50px",         property2: "50px"     }); }); 

why? , what's easiest, fastest, slickest. cross-browserest way set unknown quantity of multiple (unknown) properties? know values, don't know properties. :)

http://jsfiddle.net/4kwxa/

in javascript when constructing object can define keys strings.. meaning values in property1 , property2 not passed.. instead strings 'property1' , 'property2' passed..

to overcome this, create object in advanced, pass whole: (working jsfiddle)

var cssobj = {}; cssobj[property1] = '50px'; cssobj[property2] = '50px'; $('.greenbox').css(cssobj); 

edit:

i couldn't find in docs me case this:

when use following notation: {key1:value1, key2:value2} javascript parses keys names, , though there's variable same name defined javascript not passing value name - how built - keys cannot passed variables.

using cssobj[peroperty1] works because we're treating object associative array - , assigning key variable allowed in way.