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

4

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

edited Sep 3, 2010 at 12:46

answered Sep 3, 2010 at 12:08

slikts

8,1991 gold badge30 silver badges52 bronze badges

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

2 Comments

aularon Over a year ago

and you can omit the 'px' part. (jquery handles that automatically)

Mircea Over a year ago

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

Collectives™ on Stack Overflow

jQuery passing variabile to .css({})

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related