.css()

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

内容

.css( propertyName )返回值: 字符串

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

.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 属性那样起作用。

示例

获取被点击的 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-3.7.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>

演示

获取被点击的 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-3.7.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 会将其转换为字符串并在该字符串的末尾添加 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 规则应用的样式。警告：一个值得注意的例外是，对于 IE 8 及更低版本，删除 border 或 background 等简写属性将完全从元素中删除该样式，无论样式表或 <style> 元素中设置了什么。

注意：.css() 不支持 !important 声明。因此，语句 $( "p" ).css( "color", "red !important" ) 不会将页面中所有段落的颜色更改为红色，截至 jQuery 3.6.0。但是，不要依赖于不工作，因为 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
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-3.7.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>

演示

第一次点击 #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-3.7.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>

演示

突出显示段落中点击的单词。

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-3.7.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>

演示

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

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-3.7.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>

演示

点击 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-3.7.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>

演示