CODEWITHSUNDEEP
jquerycss
Ben
Ben

Reputation: 11502

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

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/

Upvotes: 1

Views: 808

Answers (6)

Yotam Omer
Yotam Omer

Reputation: 15356

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.

Upvotes: 3

Muhammad Umer
Muhammad Umer

Reputation: 2308

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

Upvotes: 0

otherDewi
otherDewi

Reputation: 1098

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.

Upvotes: 0

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

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

Upvotes: 1

Fuzzley
Fuzzley

Reputation: 306

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/

Upvotes: 0

Jason P
Jason P

Reputation: 27012

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

Upvotes: 0

Related Questions