jquery .css() won't set multiple properties programmatically

Question

This works:

var property1 = "width";

$('.button1').on("click", function(){
    $('.greenbox').css(property1, "200px");
});

But this doesn't:

var property1 = "width";
var property2 = "border-top";

$('.button2').on("click", function(){
    $('.greenbox').css({
        property1: "50px",
        property2: "50px"
    });
});

Why? And what's the easiest, fastest, slickest. most cross-browserest way to set an unknown quantity of multiple (unknown) properties? I know the values, I just don't know the properties. :)

http://jsfiddle.net/4KwXa/

Yotam Omer · Accepted Answer · 2013-08-08 01:24:25Z

3

In Javascript when constructing an object you can only define keys as strings.. meaning the values in property1 and property2 will not be passed.. instead the strings 'property1' and 'property2' will be passed..

To overcome this, create the object in advanced, then pass it whole: (working jsFiddle)

var cssObj = {};
cssObj[property1] = '50px';
cssObj[property2] = '50px';
$('.greenbox').css(cssObj);

Edit:

I couldn't find it in the docs to back me up but the case is this:

When you use the following notation: {key1:value1, key2:value2} javascript parses the keys as names, and even though there's a variable with the same name defined javascript is not passing the value but only the name - this is how it was built - the keys cannot be passed as variables.

Using cssObj[peroperty1] works because we're basically treating the object as an associative array - and assigning a key as a variable is allowed in this way.

edited Aug 8, 2013 at 1:24

answered Aug 8, 2013 at 0:58

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

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

1 Comment

Ben Over a year ago

Thanks. There's something fundamental here I'm trying to grasp. Why is it that when the object is created inside the function call, the keys don't refer to variables, just themselves, but when the object is created externally and then passed in, the variables references are passed in?

Austin Brunkhorst · Accepted Answer · 2013-08-08 00:59:24Z

1

The reason it's not working is because you're setting the object passed's property1 and property2 instead of the actual value of property1 and property2, etc. It's just how JavaScript interprets the objects.

A solution to this problem is to just use arrays.

var properties = ['width', 'border-top'];

$('.button2').on('click', function() {
    for(var i = 0; i < properties.length; i++)
        $('.greenbox').css(properties[i], '50px');
});

answered Aug 8, 2013 at 0:59

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

Comments

Jason P · Accepted Answer · 2013-08-08 00:58:31Z

0

You're creating an object with the literal value "property1" as the key. If you want to take the approach you're attempting, try this:

var property1 = "width";
var property2 = "border-top";

var styles = {};
styles[property1] = "50px";
styles[property2] = "50px";

$('.button2').on("click", function(){
    $('.greenbox').css(styles);
});

answered Aug 8, 2013 at 0:58

Jason P

27k3 gold badges34 silver badges45 bronze badges

Comments

Fuzzley · Accepted Answer · 2013-08-08 00:58:40Z

0

The problem is that you are not specifying the property names correctly. When you say property1: '50px', you're actually setting the property called "property1" to 50px.

http://jsfiddle.net/4KwXa/1/

answered Aug 8, 2013 at 0:58

Fuzzley

3061 gold badge2 silver badges8 bronze badges

Comments

otherDewi · Accepted Answer · 2013-08-08 01:06:37Z

0

Your syntax is wrong. To get your code to work correctly.

cssObj.css("property1", "50px").css("property2", "50px")

some of the above answers may achieve what you are trying to do more elegantly.

answered Aug 8, 2013 at 1:06

otherDewi

1,09810 silver badges24 bronze badges

2 Comments

Ben Over a year ago

yah, figured that one :) Actually this won't work either with the properties in quotes as you have it.

otherDewi Over a year ago

spotted. Too much rushing - property 1 and 2 are variables

Muhammad Umer · Accepted Answer · 2013-08-08 01:24:23Z

0

In the way you are defining key for key:'values' of object. The key itself can't be a variable.

For that you need this notation:

var obj[variable]='value';

do what i have done here... http://jsfiddle.net/techsin/4KwXa/4/

you need to do something like this:

var props={};
    props[property1]= "50px";
    props[property2]= "50px";

answered Aug 8, 2013 at 1:24

Muhammad Umer

2,3083 gold badges19 silver badges17 bronze badges

Collectives™ on Stack Overflow

jquery .css() won't set multiple properties programmatically

6 Answers 6

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related