How to use jQuery's .css() with variable property name?

Question

Instead of writing:

$('div').css({'backgroundColor': 'red'});

I want to write something like:

$('div').css({get_property_name(): 'red'});

where get_property_name() will return "backgroundColor", "color", "border-top-color", or any other property.

What options do I have to make it work ?

kennytm · Accepted Answer · 2010-09-20 10:53:13Z

15

The .css() method can also be called as .css(propertyName, value).

$('div').css(get_property_name(), 'red');

If you really need the dictionary representation:

var d = {};
d[get_property_name()] = 'red';
$('div').css(d);

answered Sep 20, 2010 at 10:53

kennytm

526k110 gold badges1.1k silver badges1k bronze badges

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

Comments

Randy the Dev · Accepted Answer · 2010-09-20 10:57:55Z

1

Just assign an object those values and pass it to .css()

var styles;
styles[get_property_name()] = 'red';
$(div).css(styles);

answered Sep 20, 2010 at 10:57

Randy the Dev

26.9k6 gold badges46 silver badges54 bronze badges