Question

This is probably too basic but I’m unable to figure out how this is done.

To modify one CSS property of a div, I do this:

$('#myDiv').css('width', '300');

What if I want to modify both width and height?

This —

$('#myDiv').css('width', '300', 'height', '250');

— didn’t work.

Chaining it works:

$('#myDiv').css('width', '300').css('height', '250');

— but I’m wondering if there’s more elegant, simpler syntax for it. Would be grateful for someone’s advice.

Answer 1

Try this

$('#myDiv').css({width: '300', height: '250'});

From official documentation

jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({‘background-color’: ‘#ffe’, ‘border-left’: ‘5px solid #ccc’}) and .css({backgroundColor: ‘#ffe’, borderLeft: ‘5px solid #ccc’}). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they’re required due to the hyphen in the name.