返回值:Stringcss(propertyName)

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

1.0 新增css(propertyName)

propertyName (String) CSS 属性。

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

$('div.left').css('float');

$('div.left').css('cssFloat');

$('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 属性。

1.0 新增css(propertyName, value)

propertyName (String) CSS 属性名。

value (String, Number) 属性值。
1.4 新增css(propertyName, function(index, value))

propertyName (String) CSS 属性名。

function(index, value) (Function) 一个函数，返回用于设置的值。this 代表当前元素。index 参数表示元素在集合中的位置。value 参数代表原来的值。
1.0 新增css(map)

map (Map) 由属性名及属性值组成的映射。

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

返回值:Stringcss(propertyName)

1.0 新增css(propertyName)

示例:

演示:

返回值:jQuerycss(propertyName, value)

1.0 新增css(propertyName, value)

1.4 新增css(propertyName, function(index, value))

1.0 新增css(map)

示例:

演示:

示例:

演示:

示例:

演示:

示例:

演示:

示例:

演示: