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.

Thank in advance!

Answer 1

{ "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);

Answer 2

Try this...

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