JQuery .css()用法及代码示例

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

用法一

.css( propertyName ) => String

说明：获取匹配元素集中第一个元素的计算样式属性。

添加的版本：1.0.css( propertyName )
- propertyName
  
  类型：String
  
  一个 CSS 属性。
添加的版本：1.9.css( propertyNames )
- propertyNames
  
  类型：Array
  
  一个或多个 CSS 属性的数组。

.css() 方法是从第一个匹配元素获取计算样式属性的便捷方法，特别是考虑到浏览器访问大多数这些属性的不同方式(基于标准的浏览器中的 getComputedStyle() 方法与 currentStyle和 9 之前 Internet Explorer 中的 runtimeStyle 属性)以及浏览器对某些属性使用的不同术语。例如，Internet Explorer 的 DOM 实现将 float 属性称为 styleFloat ，而 W3C standards-compliant 浏览器将其称为 cssFloat 。为了保持一致性，您可以简单地使用 "float" ，jQuery 会将其转换为每个浏览器的正确值。

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

请注意，元素的computed style 可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为 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()将产生 property-value 对的对象。例如，要检索所有四个渲染border-width值，你可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

从 jQuery 3.2 开始,CSS 自定义属性(也称为 CSS 变量)受支持：$( "p" ).css( "--custom-property" ).请注意，您需要按原样提供属性名称，camelCasing 不会像常规 CSS 属性那样工作。

例子：

获取点击的 div 的背景颜色。

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

演示：

获取点击的 div 的宽度、高度、文本颜色和背景颜色。

<!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-3.5.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" ).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 属性。

添加的版本：1.0.css( propertyName, value )
- propertyName
  
  类型：String
  
  CSS 属性名称。
- value
  
  类型：String 或 Number
  
  为属性设置的值。
添加的版本：1.4.css( propertyName, function )
- propertyName
  
  类型：String
  
  CSS 属性名称。
- function
  
  类型：Function(Integer 索引，String 值)=> String 或 Number
  
  返回要设置的值的函数。 this 是当前元素。接收集合中元素的索引位置和旧值作为参数。
添加的版本：1.0.css( properties )
- properties
  
  类型：PlainObject
  
  要设置的property-value 对的对象。

与.prop() 方法一样，.css() 方法可以快速轻松地设置元素的属性。此方法可以将属性名称和值作为单独的参数，也可以将键值对的单个对象。

此外，jQuery 可以同样解释 multiple-word 属性的 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()作为一个 setter，jQuery 修改元素的style属性。例如，$( "#mydiv" ).css( "color", "green" )相当于document.getElementById( "mydiv" ).style.color = "green".将样式属性的值设置为空字符串——例如$( "#mydiv" ).css( "color", "" )— 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式属性中，通过 jQuery 的.css()方法，或通过直接 DOM 操作style属性。因此，该属性的元素样式将恢复为应用的任何值。因此，此方法可用于取消您之前执行的任何样式修改。但是，它不会删除在样式表中使用 CSS 规则应用的样式或<style>元素。警告：一个值得注意的例外是，对于 IE 8 及更低版本，删除速记属性，例如border或者background将从元素中完全删除该样式，无论样式表中设置了什么或<style>元素。

注意： .css()不支持!important声明。所以，声明$( "p" ).css( "color", "red !important" )从 jQuery 3.6.0 开始，不会将页面中所有段落的颜色变为红色。不要依赖那个not working不过，作为 jQuery 的未来版本，可能会添加对此类声明的支持。强烈建议改用类；否则使用 jQuery 插件。

从 jQuery 1.8 开始，.css() setter 将自动处理属性名称的前缀。例如，在 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() 允许我们将函数作为属性值传递：

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

此示例将匹配元素的宽度设置为逐渐增大的值。

注意：如果在 setter 函数中没有返回任何内容(即。function( index, style ){} )，或者如果undefined返回时，当前值不变。这对于仅在满足某些条件时有选择地设置值很有用。

从 jQuery 3.2 开始,CSS 自定义属性(也称为 CSS 变量)受支持：$( "p" ).css( "--custom-property", "value" ).请注意，您需要按原样提供属性名称，camelCasing 不会像常规 CSS 属性那样工作。

例子：

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

<!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-3.5.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 像素。

<!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-3.5.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>

演示：

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

<!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-3.5.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>

演示：

在 mouseenter 和 mouseleave 上更改字体粗细和背景颜色。

<!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-3.5.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 的大小。

<!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-3.5.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>

演示：

相关用法

注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .css()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。

JQuery .css()用法及代码示例

用法一

`.css( propertyName ) => String`

添加的版本：1.0`.css( propertyName )`

添加的版本：1.9`.css( propertyNames )`

例子：

演示：

演示：

用法二

`.css( propertyName, value ) => jQuery`

添加的版本：1.0`.css( propertyName, value )`

添加的版本：1.4`.css( propertyName, function )`

添加的版本：1.0`.css( properties )`

例子：

演示：

演示：

演示：

演示：

演示：

用法一

.css( propertyName ) => String

添加的版本：1.0.css( propertyName )

添加的版本：1.9.css( propertyNames )

演示：

演示：

用法二

.css( propertyName, value ) => jQuery

添加的版本：1.0.css( propertyName, value )

添加的版本：1.4.css( propertyName, function )

添加的版本：1.0.css( properties )

演示：

演示：

演示：

演示：