559

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.

14 Answers 14

1037

Better to just use .addClass() and .removeClass() even if you have 1 or more styles to change. It's more maintainable and readable.

If you really have the urge to do multiple CSS properties, then use the following:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB!
Any CSS properties with a hyphen need to be quoted.
I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.

14
  • 9
    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. Jan 13, 2012 at 10:05
  • 1
    @Jonas - sorry what are you on about
    – redsquare
    Jan 13, 2012 at 11:45
  • 26
    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, 2012 at 7:44
  • 2
    @redsquare would you mind changing the answer to mention the fact that the properties need to be surrounded with quotes if they have "-" in them? This is the first hit on google for "defining multiple css properties jQuery" and anyone searching it has the potential to be inconvenienced by this missing information. I happened to be.
    – Peter Berg
    Mar 30, 2013 at 18:47
  • 4
    @redsquare Please consider adding the following to your answer. 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
    Sep 20, 2013 at 23:14
174

Pass it as an Object:

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

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

1
  • 10
    Javascript object, not JSON.
    – Chris
    Apr 22, 2017 at 11:24
75
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
6
  • 4
    to get that to work you have to change some syntax on it: $('#message').css({ width : '550px', height : '300px', 'font-size' : '8pt' }); Jan 15, 2009 at 15:48
  • 17
    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, 2009 at 21:10
  • 5
    Yea what's the problem here? width: 550 is perfectly valid.
    – rfunduk
    Mar 23, 2010 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, 2012 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}); Feb 12, 2013 at 15:38
41

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.

19

please try this,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})
17

You can also use attr along with style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );
11

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'});
11
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Also, it may be better to use jQuery's built in addClass to make your project more scalable.

Source: How To: jQuery Add CSS and Remove CSS

10

Best way is to use variable.

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);
9

Try this

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})
8

Script

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

Html

<div id="hello"></div>
7

You Can Try This

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");
1
  • 1
    This is not a good approach dude. Its better to send user json type Sep 19, 2011 at 10:39
4

if you want to change multiple css attributes then you have to use object structure as below:

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

but it get worse when we want to change lots of style, so what i suggest to you is adding a class instead of changing css using jQuery, and adding a class is more readable too.

see below example:

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

One advantage of latter example over former is if you want to add some css onclick of something and want to remove that css on second click then in latter example you can use .toggleClass('custom-class')

where in former example you have to set all css with different values which you have set before and it will be complicated, so using class option will be better solution.

1

You can use

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

The best way is to use $('selector').addClass('custom-class') and

.custom-class{
width:16px,
color: green;
margin: 0;
}

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