Why are curly brackets needed when using jQuery to adjust width and height?

Question

The following code to double an objects width and height works fine. I just can't understand why curly brackets are needed.

var target = $('#target');
target.css({
    width: target.width() * 2,
    height: target.height() * 2
});

Answer 1

The curly brackets are needed because you are passing an object literal as a parameter to the jQuery .css function. According to the documentation you can use it like this:

.css( properties )
properties
Type: PlainObject
An object of property-value pairs to set.

So width and height are not two different parameters. They are two different properties of a single object, where the property name is the style to change and the property value the value to change it to.

Mozilla has the following to say about object literals:

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

If you for some reason want to avoid using object literals, you can do it like this:

target.css("width", target.width()*2);
target.css("height", target.height()*2);

Or this:

target.width(target.width()*2);
target.height(target.height()*2);

Answer 2

Curly braces {} are needed to set multiple CSS properties. Here you are trying to set width and height .

Just check here for more info on this and here is an official jquery api reference .

Answer 3

I think you have to use this

var target=$('#target');
target.css("width",target.width()*2);
target.css("height",target.height()*2);