Scribd
Upload
47 views

Jquery Css

The .css() method in jQuery is used to get or set CSS properties of matched elements. It can get the value of a computed style property for the first element, or set one or more CSS properties for every matched element. Some key points: - .css() provides a cross-browser way to work with CSS properties by translating values like float to the correct property name for each browser. - It can retrieve single properties or an object of property-value pairs by passing an array of properties. - Retrieved values may not match what is specified in a style sheet due to browser rendering differences. - Shorthand CSS properties like margin may not retrieve all subproperty values reliably across browsers.

Uploaded by

anand
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views

Jquery Css

The .css() method in jQuery is used to get or set CSS properties of matched elements. It can get the value of a computed style property for the first element, or set one or more CSS properties for every matched element. Some key points: - .css() provides a cross-browser way to work with CSS properties by translating values like float to the correct property name for each browser. - It can retrieve single properties or an object of property-value pairs by passing an array of properties. - Retrieved values may not match what is specified in a style sheet due to browser rendering differences. - Shorthand CSS properties like margin may not retrieve all subproperty values reliably across browsers.

Uploaded by

anand
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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