[jquery] How to define multiple CSS attributes in jQuery?

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.

Pass it as an Object:

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

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

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

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

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

Script

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

Html

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

Try this

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

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.

Pass it as an Object:

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

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

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

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

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.

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

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.

please try this,

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

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.

You can also use attr along with style:

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

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

You Can Try This

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

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

Pass it as an Object:

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

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

Best way is to use variable.

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

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.

please try this,

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

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

Try this

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

You can also use attr along with style:

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

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.

Pass it as an Object:

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

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

You Can Try This

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

Script

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

Html

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

Best way is to use variable.

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

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