version added: 1.0
Return a style property on the first matched element.
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use:
$(elem).css('marginTop') and $(elem).css('marginRight'), and so on.Examples
Example 1
To access the background color of a clicked div.Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>."); }); }); </script> <style> div { width:60px; height:60px; margin:5px; float:left; } </style> </head> <body> <span id="result"> </span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> </body> </html>
version added: 1.0
Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
Be aware, however, that when the key contains a hyphen, such as "background-color," it must either be placed within quotation marks or be written in camel case like so: backgroundColor. As "float" and "class" are reserved words in JavaScript, it's recommended to always surround those terms with quotes. jQuery normalizes the "opacity" property in Internet Explorer.
Examples
Example 1
To set the font color of all paragraphs and background: $("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
Example 2
If the property name includes a "-", put it between quotation marks: $("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
Full code:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({ "background-color":"yellow", "font-weight":"bolder" }); }, function () { var cssObj = { "background-color": "#ddd", "font-weight": "", color: "rgb(0,40,244)" } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
version added: 1.0
Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value, with the following exceptions: z-index, font-weight, opacity, zoom and line-height. To remove a style property from elements use an empty string value.
Arguments
name
The name of the property to set.
The value to set the property to. In case of a Callback, the context is the to the DOM element to change.
Examples
Example 1
To change the color of any paragraph to red on mouseover event. $("p").mouseover(function () {
$(this).css("color","red");
});
Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); }); </script> <style> p { color:blue; width:200px; font-size:14px; } </style> </head> <body> <p> Just roll the mouse over me. </p> <p> Or me to see a color change. </p> </body> </html>
Example 2
To highlight a clicked word in the paragraph.Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ var words = $("p:first").text().split(" "); var text = words.join("</span> <span>"); $("p:first").html("<span>" + text + "</span>"); $("span").click(function () { $(this).css("background-color","yellow"); }); }); </script> <style> p { color:blue; font-weight:bold; cursor:pointer; } </style> </head> <body> <p> Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end. </p> </body> </html>
Was this information helpful?
