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 )

演示：

演示：

演示：

演示：