返回值:Stringcss(propertyName)

取得第一个匹配元素的 CSS 属性值。

.css() 方法可以很方便的取得第一个匹配元素的属性。对于某些属性而言，浏览器访问它们的方式是不同的，所以该方法对于取得这样的属性是格外的方便(例如，某些方法是通过基于标准浏览器的 getComputedStyle() 方法取得的，而有些方法是通过 IE 中的 currentStyle 和 runtimeStyle 属性取得的)。另外，某些特定的属性，不同浏览器的写法不一（例如,在 IE DOM 实现中 float 属性应该写成 styleFloat。然而，根据 W3C 的规范，应该写成 cssFloat），所以为了统一不同的写法，你可以简单的将其写成 "float"，这样 jQuery 就可以根据不同的浏览器，返回正确的值。例如，某元素是浮动在左侧的，下面三种写法都会返回正确的浮动值 left：

  1. $('div.left').css('float');
  2. $('div.left').css('cssFloat');
  3. $('div.left').css('styleFloat');

同样，jQuery 也能正确理解相同属性在 CSS 和 DOM 中的不同写法，将它们一视同仁。例如，jQuery 知道 .css('background-color') 和 .css('backgroundColor') 是相同的，因此能返回正确的结果。不同的浏览器对于 CSS 颜色值返回的结果是不同的，有的会以逻辑值形式返回，有的则会以实际值形式返回。例如, #FFF, #ffffff, 和 rgb(255,255,255)。

不支持简写的 CSS 属性 (例如， margin, background, border)。假如想返回 margin，请使用诸如: $(elem).css('marginTop') 和 $(elem).css('marginRight') 之类的方法。

示例:

取得所点击的 div 的背景色。

<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
  </style>
<script src="jquery.min.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>

演示:

返回值:jQuerycss(propertyName, value)

为匹配的元素设置一个或多个 CSS 属性。

和 .prop() 方法一样，.css() 方法可以方便快捷的设置元素的属性。既可以直接使用属性值和属性名设置元素的属性，也可以通过一个由属性名及属性值组成的映射(JavaScript 对象标记)进行设置。

同样，jQuery 也能正确理解相同属性在 CSS 和 DOM 中的不同写法，将它们一视同仁。例如，jQuery 知道 .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 和 .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}) 是相同的，因此能返回正确的结果。注意，在 DOM 标记法中，属性名可以不使用引号包裹，但是在 CSS 标记法中，如果属性名中含有连字符(-)的话，则必须用引号包裹。

当使用 .css() 进行赋值时，jQuery 会修改元素的 style 属性。例如，$('#mydiv').css('color', 'green') 等价于 document.getElementById('mydiv').style.color = 'green'。如果将属性值设置成空字符串，— 例如， $('#mydiv').css('color', '') — 那么会从元素上移除该属性（若该属性存在的话），该属性之前可能是通过 jQuery 的 .css() 方法设置的 HTML style 属性，也有可能是通过直接对 style 属性进行 DOM 操作而被设置的。它不会移除通过 CSS 规则或 <style> 元素设置的属性。

从 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;
});

上面的例子会使匹配元素的宽度变大 50 倍。

注意: 如果给定的函数什么都没有返回(例如， function(index, style){}), 或者返回的是 undefined，那么该属性的属性值不会被修改。适用于只有满足特定的条件时，有选择性的设置属性值的情况。

示例:

当鼠标移动到段落上时，改变文字的颜色。

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>


  <p>Just roll the mouse over me.</p>

  <p>Or me to see a color change.</p>
  

<script>


  $("p").mouseover(function () {
    $(this).css("color","red");
  });


</script>
</body>
</html>

演示:

示例:

将 #box 元素的宽度增加 200 像素。

<!DOCTYPE html>
<html>
<head>
<style>
  #box { background: black; color: snow; width:100px; padding:10px; }
  </style>
<script src="jquery.min.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>
<head>
<style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
<script src="jquery.min.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(" ");
  var text = words.join("</span> <span>");
  $("p:first").html("<span>" + text + "</span>");
  $("span").click(function () {
    $(this).css("background-color","yellow");
  });



</script>
</body>
</html>

演示:

示例:

鼠标悬停在段落上时，改变背景和文字颜色:

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:green; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>


  <p>Move the mouse over a paragraph.</p>
  <p>Like this one or the one above.</p>


<script>


  $("p").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
  }, function () {
    var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'rgb(0,40,244)'
    }
    $(this).css(cssObj);
  });


</script>
</body>
</html>

演示:

示例:

增加所点击 div 的 大小：

<!DOCTYPE html>
<html>
<head>
<style>
  div { width: 20px; height: 15px; background-color: #f33; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>


  <div>click</div>
  <div>click</div>


<script>


  $("div").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>

演示: