jQuery - CSS property in variable does not work

Question

I want to set CSS properties by a variable: e.g. {background: red; }

My code has a mistake, it does not work: js fiddle

js

            var Key = 'background';
            var Value = 'yellow';


                $('.test').css({

                    Key: Value
                });

this kind of syntax may require the exact string like as CSS code you type (which does not support any kind of variable), so use other kind of syntax provided by the answers below — King King
– King King, Commented Mar 31, 2014 at 11:13

Anoop Joshi P · Accepted Answer · 2014-03-31 11:11:32Z

3

It should be like .css("propertyname","value"). So your code will need to change like

$('.test').css(Key, Value);

See this for more reference

answered Mar 31, 2014 at 11:11

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

Comments

Milind Anantwar · Accepted Answer · 2014-03-31 11:11:16Z

3

use:

$('.test').css(Key, Value);

Working Example

answered Mar 31, 2014 at 11:11

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Jai · Accepted Answer · 2014-03-31 11:27:21Z

2

See there are two ways of applying css to an element with jQuery:

First:

$(selector).css("propertyname","value");

Second:

$(selector).css({"propertyname":"value"}); // object with key : value pair

What is the issue in your code?

The issue is

{Key:Value}

object key which has to be a string ("") so that does not work in your case your best bet to go with first one:

$('.test').css(Key, Value);

to understand this go to this Fiddle

answered Mar 31, 2014 at 11:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

row1 · Accepted Answer · 2014-03-31 11:29:47Z

1

If you want to use the plain object css overload, then you will need to do it like this:

$('.test').css({
'background': Value
});

Or

var properties ={};
var Key = 'background';
var Value = 'yellow';

properties[Key] = Value;

$('.test').css(properties);

The problem with {Key: Value} is that it thinks the property name is Key and not background.

answered Mar 31, 2014 at 11:29

row1

5,5883 gold badges48 silver badges74 bronze badges

Collectives™ on Stack Overflow

jQuery - CSS property in variable does not work

4 Answers 4

Comments

Comments

First:

Second:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

First:

Second:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related