Question

I have this function:

function myfunc(obj, properties, value) {       
    $.each(properties, function(i, key) {
        var a = '-webkit-border-' + key + '-radius';
        var b = '-moz-border-radius-' + key.replace(/\-/g, '');
        var c = 'border-' + key + '-radius';
        var z = value+'px';
         obj.css({a : z, b: z, c: z});
    });
}

Called like this:

myfunc($tab, ['top-left', 'top-right'], defaults.tabRounded);

Note that if I replace the obj.css line with:

obj.css({'border-top-right-radius': value+'px'});

It works as intended. Yet the values of a, b, c are completely correct.

What is going on?

Answer 1

The keys of an object literal in JavaScript are strings, not variables. If you do not quote them yourself, they are auto-quoted. So if you write

var a = {b: 1};

it’s the same as if you had written

var a = {'b': 1};

You have to use [] to set keys dynamically.

var a = {};
a[b] = 1;

In this case modify your function to

function myfunc(obj, properties, value) {       
    $.each(properties, function(i, key) {
        var a = '-webkit-border-' + key + '-radius';
        var b = '-moz-border-radius-' + key.replace(/\-/g, '');
        var c = 'border-' + key + '-radius';
        var z = value+'px';
        var css = {};
        css[a] = css[b] = css[c] = z;
         obj.css(css);
    });
}