jQuery Variables as Key in Key:Pair CSS attributes

Question

Is it possible to take something like:

$("div").css({
    "top": var1,
    "height": var2,
     etc.
});

And turn it into:

var dir = "top";
var length = "height";

$("div").css({
    dir: var1,
    length: var2,
     etc.
});

So far, the only way I can get it to work is by repeatedly declaring the lines separately, such as:

$("div").css(dir, var1);
$("div").css(length, var2);
$("div").css(etc.);

Does anyone have any other ideas? The reason I'm bothering with this is because I would like to be able to flip my module by 90 degrees (aka, have it go left to right or top to bottom), and to do that I'd have to have a universal variable for direction.

Grant Wagner · Accepted Answer · 2009-09-16 21:27:45Z

10

{ "top": var1, "height": var2 } creates a JavaScript Object that has two user-defined properties. Unfortunately, JavaScript does not allow you to use variables as property names when defining an Object in this way.

You should be able to do it like this:

var o = {};
o[dir] = var1;
o[length] = var2;
$("div").css(o);

answered Sep 16, 2009 at 21:27

Grant Wagner

26k7 gold badges57 silver badges65 bronze badges

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

1 Comment

Matrym Over a year ago

This is a really interesting solution. I'm going to have to give it more thought, but it definitely answers the question. Thanks!

Josh Stodola · Accepted Answer · 2009-09-16 21:28:24Z

1

Try this...

var myCss = {};
myCss[dir] = var1;
$("div").css(myCss);

answered Sep 16, 2009 at 21:28

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

jQuery Variables as Key in Key:Pair CSS attributes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related