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 ?

Answer 1

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

Answer 2

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

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