CODEWITHSUNDEEP
jquerycsskey
Matrym
Matrym

Reputation: 17073

jQuery Variables as Key in Key:Pair CSS attributes

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.

Upvotes: 2

Views: 2298

Answers (2)

Josh Stodola
Josh Stodola

Reputation: 82523

Try this...

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

Upvotes: 1

Grant Wagner
Grant Wagner

Reputation: 25951

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

Upvotes: 10

Related Questions