.css()

类别：CSS | 文档处理 > 样式属性
针对匹配的元素集合中的第一个元素，取得计算的样式属性的值，或者针对每个匹配的元素，设置一个或多个CSS属性。

内容：

.css( propertyName )返回类型：String

描述：针对匹配的元素集合的第一个元素，取得计算的样式属性。

.css()方法是从第一个匹配元素上取得计算样式属性的便利方法，尤其在于应付浏览器访问大多数属性的不同方式时（getComputedStyle()方法是标准方法，相较之下在Internet Explorer 9以前的Internet Explorer 版本中，是使用currentStyle属性和runtimeStyle属性），并且，某些特定的属性，不同浏览器使用不同的术语。例如，Internet Explorer 的DOM实现器把float属性称为styleFloat，与此同时W3C标准浏览器称它为cssFloat。为了一致性，你可以简单使用"float"，并且jQuery将把它翻译为针对每个浏览器的当前值。

此外，jQuery可以等同地解释CSS和多单词属性的DOM格式。例如，jQuery理解.css( "background-color" )和.css( "backgroundColor" )，并返回正确值。这意味着混合大小写具有特殊的意义，例如，.css( "WiDtH" )将不用与.css( "width" )做同样的事情。

请注意，元素的计算样式可能与在样式表中针对元素指定的值不相同。例如，尺寸的计算样式始终是像素，但是在样式表中它们可能是以em、ex、px或%指定的。不同的浏览器可能返回逻辑上相同但是字面上不同的CSS颜色值，例如，#FFF、#ffffff和rgb(255,255,255)。

取得简写CSS属性（例如，margin、background、border）虽然是一些浏览器的功能，但是不能保证取得。例如，如果你想检索呈现的border-width，请使用$( elem ).css( "borderTopWidth" )、$( elem ).css( "borderBottomWidth" )等等。

一个元素在它上面调用.css()时，必须连接到DOM。如果未连接，jQuery可能抛出一个错误。

自从jQuery 1.9以来，把一个样式属性的数组传给.css9)将产生属性值对的对象。例如，为了检索所有四个呈现的border-width值，你可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])。

示例：

取得被点击div的背景色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!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>
 
<script>
$( "div" ).click(function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>
 
</body>
</html>

演示：

取得被点击div的宽度、高度、字色、背景色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
 
<!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);
    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>

演示：

.css( propertyName, value )返回类型：jQuery

描述：针对匹配的元素集合，设置一个或多个CSS属性。

就像用.prop()方法，.css()方法用来快速简单地设置元素的属性。此方法可以取用属性名称以及值作为分开的参数，也可以取用一个键值对的对象作为参数。

而且，jQuery会等同地解析CSS和多单词属性的DOM格式。例如，jQuery理解 .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })和.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })并返回正确的值。请注意，利用DOM记号法，包围属性名称的引号是可选的，但是用CSS记号法，由于名称中有连字符（“-”），就必须用引号。

当数字传递为一个值时，jQuery将把它转换为字符串并在字符串末尾加上px。如果属性需要除了px以外的单位，就请在调用此方法之前，先把该值转换为字符串，并加上适当的单位。

当使用.css()作为设置器时，jQuery会修改元素的style属性。例如，$( "#mydiv" ).css( "color", "green" )等于document.getElementById( "mydiv" ).style.color = "green"。把一个样式属性值设置为空字符串，例如$( "#mydiv" ).css( "color", "" )，会从元素上删除属性，如果它已经被直接应用了，无论是用HTML样式特定应用的，还是通过jQuery的.css()方法引用的，或者是通过style属性的直接的DOM操纵应用的。作为后果，针对此属性的元素的样式将被重新存储为为它所应用的值。所以，此方法可以用来撤销任何先前实施的样式修改。然而，它并不会删除用样式表或者<style>元素中的CSS规则应用的样式。

警告：对于Internet Explorer 8及以下版本，一个显著的异常是，删除简写属性，譬如border或background将从元素上删除整个样式，无论在样式表或<style>元素中被设置成了什么。

注意： .css()将忽略掉!important声明。所以，此语句$( "p" ).css( "color", "red !important" )不会把网页中的所有段落的字色变红。强烈建议使用类来代替，或者使用jQuery插件。

自从jQuery 1.8以来，.css()设置器将自动照顾到属性名的前缀。例如，在Chrome/Safari中取用.css( "user-select", "none" )，将把它设置为-webkit-user-select，在Firefox中将使用-moz-user-select，在IE10中将取用-ms-user-select。

自从jQuery 1.6以来，.css()接受相对值类似于.animate()的。相对值是一个字符串，用+=或-=开头，以增加或减少当前值。例如，如果元素的padding-left是10px，则.css( "padding-left", "+=15" )将产生padding-left为25px的总补白。

自从jQuery 1.4以来，.css()允许我们传递一个函数作为属性的值：

1
2
3
 
$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

此示例把匹配的元素的宽度设置为增加到更大的值。

注意：在设置器函数（亦即function( index, style ){} )）中如果没有返回什么东西，或者返回了undefined，当前值不会改变。这对于在满足特定条件时选择性地设置值来说很有用。

示例：

针对mouseover事件，把一些段落的字色改成红色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    width: 200px;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
  <p>Just roll the mouse over me.</p>
 
  <p>Or me to see a color change.</p>
 
<script>
$( "p" ).on( "mouseover", function() {
  $( this ).css( "color", "red" );
});
</script>
 
</body>
</html>

演示：

当#box第一次被点击时，增加宽度200像素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  #box {
    background: black;
    color: snow;
    width: 100px;
    padding: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="box">Click me to grow</div>
 
<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
 
</body>
</html>

演示：

高亮段落中被点击的单词。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    font-weight: bold;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
  $( this ).css( "background-color", "yellow" );
});
</script>
 
</body>
</html>

演示：

针对mouseenter事件和mouseleave事件，改变字体的粗细和背景色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
 
<script>
$( "p" )
  .on( "mouseenter", function() {
    $( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });
  })
  .on( "mouseleave", function() {
    var styles = {
      backgroundColor : "#ddd",
      fontWeight: ""
    };
    $( this ).css( styles );
  });
</script>
 
</body>
</html>

演示：

当你点击div时增加它的尺寸。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 20px;
    height: 15px;
    background-color: #f33;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>click</div>
<div>click</div>
 
<script>
$( "div" ).on( "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>

演示：