Description: Get the value of a style property for the first element in the set of matched elements.
propertyNameA CSS property.
The .css()
method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle()
method in standards-based browsers versus the currentStyle
and runtimeStyle
properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the float
property as styleFloat
, while W3C standards-compliant browsers refer to it as cssFloat
. The .css()
method accounts for such differences, producing the same result no matter which term we use. For example, an element that is floated left will return the string left
for each of the following three lines:
$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color')
and .css('backgroundColor')
.
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.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</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>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>
Description: Set one or more CSS properties for the set of matched elements.
propertyNameA CSS property name.
valueA value to set for the property.
propertyNameA CSS property name.
function(index, value)A function returning the value to set. Receives the index position of the element in the set and the old value as arguments.
mapA map of property-value pairs to set.
As with the .attr()
method, the .css()
method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single map of key-value pairs (JavaScript object notation).
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. 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.
As with .attr()
, .css()
allows us to pass a function as the property value:
$('div.example').css('width', function(index) { return index * 50; });
This example sets the widths of the matched elements to incrementally larger values.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
<script>
$("p").mouseover(function () {
$(this).css("color","red");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; font-weight:bold; cursor:pointer; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</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>
<script>
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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<script>
$("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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 20px; height: 15px; background-color: #f33; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>click</div>
<div>click</div>
<script>
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
</script>
</body>
</html>