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.

Answer 1

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';