You are on page 1of 7

.

css()
Categories: CSS | Manipulation > Style Properties

Get the value of a computed style property for the first element in the set of matched
elements or set one or more CSS properties for every matched element.
Contents:
.css( propertyName )

.css( propertyName )

.css( propertyNames )
.css( propertyName, value )

.css( propertyName, value )

.css( propertyName, function )

.css( properties )

.css( propertyName )Returns: String


Description: Get the computed style properties for the first element in the set of
matched elements.
version added: 1.0.css( propertyName )

propertyName

o
Type: String

A CSS property.
version added: 1.9.css( propertyNames )

propertyNames

o
Type: Array

An array of one or more CSS properties.


The .css() method is a convenient way to get a computed 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. For consistency, you can simply use "float", and jQuery will translate it
to the correct value for each browser.
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" ). This means mixed
case has a special meaning, .css( "WiDtH" ) won't do the same as .css( "width" ), for
example.
Note that the computed style of an element may not be the same as the value specified for
that element in a style sheet. For example, computed styles of dimensions are almost
always pixels, but they can be specified as em, ex, px or % in a style sheet. Different
browsers may return CSS color values that are logically but not textually equal, e.g., #FFF,
#ffffff, and rgb(255,255,255).
Retrieval of shorthand CSS properties (e.g., margin, background, border), although
functional with some browsers, is not guaranteed. For example, if you want to retrieve the
rendered border-width, use: $( elem ).css( "borderTopWidth" ), $
( elem ).css( "borderBottomWidth" ), and so on.
An element should be connected to the DOM when calling .css() on it. If it isn't, jQuery
may throw an error.
As of jQuery 1.9, passing an array of style properties to .css() will result in an object of
property-value pairs. For example, to retrieve all four rendered border-width values, you
could use $( elem ).css([ "borderTopWidth", "borderRightWidth",
"borderBottomWidth", "borderLeftWidth" ]).

Examples:
Example: Get the background color of a clicked div.

1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span id="result">&nbsp;</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>

13

<script>
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "That div is <span style='color:" +
color + ";'>" + color + "</span>." );
});
</script>

14

</body>
</html>

11
12

15
16
17
18
19
20
21

22
23
24
25
26
27
28
29
30
31
32
33

Demo:
Example: Get the width, height, text color, and background color of a clicked div.

1
2
3
4
5
6
7
8

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

background-color: rgb(15, 99, 30);


}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$( "div" ).click(function() {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

55
56
57
58
59

Demo:

You might also like