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?

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.

Answer 1

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.

Answer 2

Pass it as an Object:

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

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

Answer 3

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

Answer 4

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.

Answer 5

please try this,

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

Answer 6

You can also use attr along with style:

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

Answer 7

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 8

$("#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

Answer 9

Try this

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

Answer 10

Best way is to use variable.

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

Answer 11

Script

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

Html

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

Answer 12

You Can Try This

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

Answer 13

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.

Answer 14

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;
}