Using variables in .css() with Jquery

Question

I'm running into a rather odd problem that I just can't seem to solve. I'm trying to use a variable in the .css() but it doesn't work. However if I type in 'background-color' directly within the .css() call it does. What gives?

var css = that.data('css');
var targets = that.data('targets');
var value = that.val();
console.log(css + ' ' + targets + ' ' + value);
console.log(css === 'background-color');
    // returns true

$(targets).css({
    css: value
});
// Doesn't work!

$(targets).css({
    'background-color': value
});
// Works ok!

Musa · Accepted Answer · 2012-11-22 23:43:35Z

4

You cannot use a variable as a key in an object literal, create the object first then use bracket notation to add the property

    var obj = {};
    obj[css] = value;
    $(targets).css(obj);

or simply

    $(targets).css(css, value);

answered Nov 22, 2012 at 23:43

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

Guffa · Accepted Answer · 2012-11-22 23:44:41Z

2

You can't use a variable as an identifier in an object literal. Using { css: value } creates an object with a property named css, it's not using the variable css.

Create an object and set the property:

var o = {};
o[css] = value;
$(target).css(o);

answered Nov 22, 2012 at 23:44

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

user1832281 · Accepted Answer · 2012-11-23 00:14:57Z

0

This works too. Try removing the curly braces inside .css() and use a comma instead of colon.

   var css = 'background-color';
    var targets = '#hellowhat';
    var value = '#000';


 $(""+ targets +"").css(
        css, value);

answered Nov 23, 2012 at 0:14

user1832281

1543 bronze badges

Collectives™ on Stack Overflow

Using variables in .css() with Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related