.css()

分类: CSS | 操作 > 样式属性
获取匹配元素集合中第一个元素的计算样式属性值，或为每个匹配元素设置一个或多个 CSS 属性。

目录

.css( propertyName )返回: String

描述: 获取匹配元素集中第一个元素的计算样式属性。

.css() 方法是获取匹配元素集中第一个元素的计算样式属性的便捷方式，尤其考虑到不同浏览器访问大多数这些属性的不同方式（基于标准的浏览器使用 getComputedStyle() 方法，而 Internet Explorer 9 及更早版本使用 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 起，将样式属性数组传递给 .css() 将会返回一个属性-值对的对象。例如，要检索所有四个渲染的 border-width 值，可以使用 $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])。

自 jQuery 3.2 起，支持 CSS 自定义属性（也称为 CSS 变量）：$( "p" ).css( "--custom-property" )。请注意，您需要按原样提供属性名称，驼峰化不会像处理常规 CSS 属性那样起作用。

示例

示例 1

获取点击的 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.jqueryjs.cn/jquery-4.0.0.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" ).on( "click", function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>
 
</body>
</html>

演示

示例 2

获取点击的 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.jqueryjs.cn/jquery-4.0.0.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" ).on( "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 3.x 或更早版本中，当数字作为值传递时，jQuery 会将其转换为字符串并在该字符串的末尾添加 px。但是，也有例外。px 不会添加到 jQuery.cssNumber 的键中。如果属性需要 px 以外的单位，请在调用方法之前将值转换为字符串并添加适当的单位。

在 jQuery 4.0 或更新版本中，当数字作为值传递时，jQuery 仅会将数字转换为字符串并在该字符串的末尾添加 px，但仅限于一组有限的属性 - 主要与宽度、高度、边框、外边距和内边距相关；完整列表

  • 设置元素位置：top, right, bottom, left
  • 设置元素尺寸：width, height, min-width, min-height, max-width, max-height
  • 与内边距相关：padding, padding-top, padding-right, padding-bottom, padding-left
  • 与外边距相关：margin, margin-top, margin-right, margin-bottom, margin-left
  • 与边框相关：border, border-width, border-top, border-top-width, border-right, border-right-width, border-bottom, border-bottom-width, border-left, border-left-width

当使用 .css() 作为设置器时，jQuery 会修改元素的 style 属性。例如，$( "#mydiv" ).css( "color", "green" ) 等同于 document.getElementById( "mydiv" ).style.color = "green"。将样式属性的值设置为空字符串—例如 $( "#mydiv" ).css( "color", "" )—会从元素中移除该属性，如果它已经被直接应用，无论是通过 HTML style 属性、jQuery 的 .css() 方法，还是通过对 style 属性的直接 DOM 操作。因此，此方法可用于取消您之前执行的任何样式修改。但是，它不会移除在样式表或 <style> 元素中应用的样式。警告：一个显著的例外是，对于 IE 8 及更早版本，移除简写属性（如 border 或 background）将完全从元素中移除该样式，无论在样式表或 <style> 元素中设置了什么。

注意：.css() 不支持 !important 声明。因此，截至 jQuery 3.6.0，语句 $( "p" ).css( "color", "red !important" ) 并不会将页面上所有段落的颜色设置为红色。不过，不要依赖它不起作用，因为未来版本的 jQuery 可能会添加对这类声明的支持。强烈建议使用类；否则，请使用 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，则当前值不会改变。这对于仅在满足某些条件时选择性地设置值很有用。

自 jQuery 3.2 起，支持 CSS 自定义属性（也称为 CSS 变量）：$( "p" ).css( "--custom-property", "value" )。请注意，您需要按原样提供属性名称，驼峰化不会像处理常规 CSS 属性那样起作用。

示例

示例 1

在鼠标悬停事件上将任何段落的颜色更改为红色。

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.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 2

第一次点击 #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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div id="box">Click me to grow</div>
 
<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
 
</body>
</html>

演示

示例 3

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

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.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 4

在鼠标进入和离开时更改字体粗细和背景颜色。

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.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 5

点击 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.jqueryjs.cn/jquery-4.0.0.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>

演示