Applying more CSS properties within one line

Question

Is there any possible way to apply more than CSS to a control through a single line of code.In below example i could i apply only one property

$('#<%=lblMessage.ClientID%>').css("color", "#16428b");

Suppose if i would like to apply font or background.. how it is possible

-Thanks

Answer 1

You just chain them:

$('#<%=lblMessage.ClientID%>')
   .css("color", "#16428b")
   .css("font-family", "Helvetica, Arial, sans-serif")
   .css("background", "#ccc");

Most methods in the jQuery object returns the jQuery object itself, so you just apply another method to the return value.

Edit:
If it's efficiency you are looking for it's of course best to update the element style directly:

var e = document.getElementById('<%=lblMessage.ClientID%>');
e.style.color = '#16428b';
e.style.fontFamily = 'Helvetica, Arial, sans-serif';
e.style.backgroundColor = '#ccc';

Answer 2

Chain it.

$('#<%=lblMessage.ClientID%>').css("color", "#16428b").css("background","black");

Most Jquery functions return the Jquery object so you can do more stuff.

Alternatively, in the case of css, you can pass them in one properties object:

$('#<%=lblMessage.ClientID%>').css({color: "#16428b", background: "black"});

More info can be found here http://docs.jquery.com/CSS

Answer 3

.css({
    color: "#16428b",
    backgroundColor: "#f0f",
    "font-size" : "3em"
})

note the different styles of defining the CSS rules: camelCase for javascript, "css-style" for quoted strings.

This is also much more efficient than multiple chains of successive .css() calls, since it doesn't require multiple passes through your jQuery object.

Answer 4

$('#<%=lblMessage.ClientID%>').css("color", "#16428b").css("background", "1px solid red");

Will this do the trick?

Answer 5

Jquery's css selector can take a dictionary of options. So you could do this:

$('#<%=lblMessage.ClientID%>').css({ 
   "color": "#16428b", 
   fontWeight: "bold", 
   "float": "left", 
   "font-size": 2em 
});

Note that if you are not going to quote the property you need to camelCase it. If you do quote it, using the hyphenated version is fine.