Variable as attribute name

Question

It is possible to use a variable as a value:

$("#anything").css({
    "top": value
});

But if I try the opposite:

toporbottom = "top";
$("anything").css({
    toporbottom: "50px"
});

it doesnt work. Is there a elegant solution?

pimvdb · Accepted Answer · 2012-03-10 20:28:47Z

1

In your case, you don't need an object because you're only setting one property. Use:

$(...).css(toporbottom, "50px");

If you do want an object, you'll have to make an empty one first, then set the property using the [...] notation, and pass obj. But this is definitely overkill here:

var obj = {};
obj[toporbottom] = "50px"; // `obj["top"]` is the same as `obj.top`
$(...).css(obj);

answered Mar 10, 2012 at 20:28

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

1 Comment

user1261488 Over a year ago

This works best because I can also use it with .animate()! Thanks!

rjz · Accepted Answer · 2012-03-10 20:29:35Z

1

In that case, you can call css using the name and value as individual arguments:

toporbottom = "top"; 
$("anything").css(toporbottom, "50px");

answered Mar 10, 2012 at 20:29

rjz

16.5k3 gold badges39 silver badges35 bronze badges

Comments

jeremysawesome · Accepted Answer · 2012-03-10 20:31:14Z

1

Sure it is. Use the alternate .css syntax.

$(document).ready(function(){
    var topOrBottom = "top";

    $("#changeme").css(topOrBottom, 200);
});

answered Mar 10, 2012 at 20:31

jeremysawesome

7,2745 gold badges35 silver badges38 bronze badges

Comments

Shiplu Mokaddim · Accepted Answer · 2012-03-10 20:32:09Z

1

Object literal does not support variable as key. Key should be always constant. However you can use the [] to set a property.

toporbottom = "top";
var obj = {};
obj[toporbottom] = "50px"; // Line of interest
$("anything").css(obj);

answered Mar 10, 2012 at 20:32

Shiplu Mokaddim

57.5k20 gold badges147 silver badges193 bronze badges

Collectives™ on Stack Overflow

Variable as attribute name

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related