CODEWITHSUNDEEP
jquerycss
Edward Tanguay
Edward Tanguay

Reputation: 193302

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.

Upvotes: 564

Views: 725034

Answers (14)

Justin
Justin

Reputation: 157

Best way is to use variable.

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

Upvotes: 12

redsquare
redsquare

Reputation: 78667

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.

Upvotes: 1047

Akshay Rathnavas
Akshay Rathnavas

Reputation: 358

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

Upvotes: 1

dave mankoff
dave mankoff

Reputation: 17779

Pass it as an Object:

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

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

Upvotes: 177

Rizwan
Rizwan

Reputation: 4433

Script

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

Html

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

Upvotes: 8

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

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.

Upvotes: 4

Alexander Online Media
Alexander Online Media

Reputation: 816

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

Upvotes: 11

Janak Prajapati
Janak Prajapati

Reputation: 886

Try this

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

Upvotes: 9

Sampson
Sampson

Reputation: 268344

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.

Upvotes: 41

Somnath Kharat
Somnath Kharat

Reputation: 3610

You can also use attr along with style:

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

Upvotes: 17

Megaloman
Megaloman

Reputation: 191

please try this,

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

Upvotes: 19

Sumith Harshan
Sumith Harshan

Reputation: 71

You Can Try This

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

Upvotes: 7

Jimmy
Jimmy

Reputation: 91472

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

Upvotes: 76

Darko
Darko

Reputation: 38860

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

Upvotes: 11

Related Questions