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.