current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 218 down vote favorite
54

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?

From jQuery API, 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. – zanetu S

share|improve this question

10 Answers 10

up vote 419 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'
});

I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.

share|improve this answer
3  
as in More maintainable and readable :) –  redsquare Jan 15 '09 at 15:40
20  
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
12  
@rlb.usa actually it is not incorrect, the above works jsfiddle.net/ERkXP. Thanks for the downvote! –  redsquare May 16 '11 at 19:07
8  
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
18  
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
up vote 102 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 47 down vote 
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
share|improve this answer
3  
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
12  
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
4  
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
5  
@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 '13 at 15:38
up vote 27 down vote

Using a plain object, you can pair up strings that represent property names with their corresponding values. Changing the background color, and making text bolder, for instance would look like this:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

Alternatively, you can use the JavaScript property names too:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

More information can be found in jQuery's documentation.

share|improve this answer
up vote 13 down vote

please try this,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})
share|improve this answer
up vote 7 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 4 down vote

You Can Try This

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

You can also use attr along with style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );
share|improve this answer
up vote 0 down vote

Try this

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})
share|improve this answer
up vote -3 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

protected by Josh Crozier Mar 3 '14 at 19:23

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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