jQuery passing variabile to .css({})

Question

I have the following function:

$("#myId").css({left: leftVal+"px", top:topVal+"px"});

this works.

I am looking for a way to add left: leftVal+"px", top:topVal+"px" as a variable and make my function:

$("#myId").css({myCSSstuff});

I've tryed

var myCSSstuff= "left: "+leftVal+"px, top:"+topVal+"px"

but it does not work. Is there a way to do this? Thanx.

slikts · Accepted Answer · 2010-09-03 12:46:32Z

You can do it like this:

var myCSSstuff = { left: leftVal, top: topVal }; $("#myId").css(myCSSstuff);

The {} notation is for objects or associative arrays.

There are two ways you can add more properties:

myCSSstuff.color = 'red'; myCSSstuff['color'] = 'red';

The second approach allows you to use strings for the property name, i.e.

var prop = 'color'; myCSSstuff[prop] = 'red';

and you can omit the 'px' part. (jquery handles that automatically)
thanx, this works!. What if I need to add another variable in the array at some point. Something like myCSSstuff = myCSSstuff + {color: something}. How can I do that? Thanx again

1 Answer 1