Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 87 down vote favorite
18

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?

share|improve this question

8 Answers

up vote 171 down vote accepted

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

NB Any css props with a hyphen need to be quoted. 

.css({
   'font-size' : '10px',
   width : '30px',
   height : '10px'
});
share|improve this answer
2  
as in More maintainable and readable :) – redsquare Jan 15 '09 at 15:40
10  
This is actually incorrect - the properties need quotes around them as well as the values. See Dave Mankoff's answer. – rlb.usa May 16 '11 at 16:53
6  
@rlb.usa actually it is not incorrect, the above works jsfiddle.net/ERkXP. Thanks for the downvote! – redsquare May 16 '11 at 19:07
5  
Why on earth propose and even argue for such non-standard syntax! Just add a style with '-' i.e. font-size, and it fail. If it's about prove limits, then are $('div').css({ width : 300, height: 40 }); valid also. – Independent Jan 13 '12 at 10:05
10  
If the CSS property has a dash character (ie. text-overflow) then you need to put quotes around the property. That's what rlb.usa and Jonas are talking about I think. – dan Mar 19 '12 at 7:44
show 6 more comments
up vote 59 down vote

pass it a json object:

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

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

share|improve this answer
up vote 34 down vote 
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
share|improve this answer
1  
to get that to work you have to change some syntax on it: $('#message').css({ width : '550px', height : '300px', 'font-size' : '8pt' }); – Edward Tanguay Jan 15 '09 at 15:48
7  
erm, thanks to all the drive-by downvoters who never read jquery documentation? numeric values are converted into pixel values automatically kthx. – Jimmy Jan 15 '09 at 21:10
1  
Yea what's the problem here? width: 550 is perfectly valid. – rfunduk Mar 23 '10 at 1:37
i think you could also use fontSize without quotes... my question is though.... how do you set height, and width, let's say... to the SAME value.... would it be .css({ { width, height} : 300 })? – alex gray Feb 23 '12 at 15:01
1  
@alexgray there's no direct way to do this, but you can set them each to the same variable: var x = 100; $el.css({width: x, height: x}); – dave mankoff Feb 12 at 15:38
up vote 14 down vote

From jQuery: 

$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
share|improve this answer
up vote 8 down vote

please try this,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})
share|improve this answer
up vote 5 down vote

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'});
share|improve this answer
up vote 3 down vote

You Can Try This

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");
share|improve this answer
This is not a good approach dude. Its better to send user json type – Awais Qarni Sep 19 '11 at 10:39
up vote -2 down vote

You can try something like this perhaps:

var lineHeight = $('div').height();
var divHeight = lineHeight + 40;
$('div.another').css( { 'height': divHeight, 'line-height': lineHeight } );
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.