How to define multiple CSS attributes in JQuery?

Question

Is there any syntactical way in JQuery to define multiple CSS attributes without stringing everything out to the right like this:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

If you have, say, 20 of these your code will become hard to read, any solutions?

Answer 1

better to just use .addClass even if you have 1 or more. More maintainable and readable.

If you really have the urge to do multiple css props then use

.css( {width : '30px', height : '10px'} )

Answer 2

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Answer 3

pass it a json object:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

Answer 4

From jQuery:

$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

Answer 5

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

Answer 6

ok, but what would I do when I have to put a VAR as a CSS value?

like this:

var divHeight = $('div').height();) $('div.another').css('height', divHeight + 40, 'line-height': divHeight);

Could someone help?

Answer 7

could do something like this perhaps:

var lineHeight = $('div').height();

var divHeight = lineHeight + 40;

$('div.another').css( { 'height': divHeight, 'line-height': lineHeight } );

Answer 8

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");