.css() | jQuery API中文文档(适用jQuery 1.0

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

.css( propertyName )返回: String

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

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

.css()方法可以非常方便地获取匹配的元素集合中第一个元素的样式属性的计算值，对于某些属性而言，浏览器访问样式属性的方式是不同的，该方法对于取得这些属性是非常方便的(例如，某些属性在标准浏览器下是通过的 getComputedStyle() 方法取得的，而在Internet Explorer 9之前版本中是通过currentStyle 和 runtimeStyle属性取得的)并且，某些特定的属性，不同浏览器的写法不一。举个例子， Internet Explorer的DOM 将float 属性写成 styleFloat实现，W3C标准浏览器将float 属性写成cssFloat。为了保持一致性，您可以简单地使用"float"，jQuery将为每个浏览器返回它需要的正确值。

另外,jQuery同样可以解析 CSS 和用多词（multiple-word）格式化（注：用横杠连接的词，比如：background-color）的DOM属性的不同写法。举个例子，jQery能解析.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的样式属性的数组给.css()将返回属性 - 值配对的对象。例如，要获取元素4个边距宽度值border-width，你可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

例子:

Example: 点击div，得到它的背景颜色

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

        
      

  

Demo:

Example: 点击div，得到宽度，高度，文本颜色，背景颜色。

  
    
        
        
          <!DOCTYPE html>
<html>
<head>
  <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="//code.jquery.com/jquery-latest.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>

        
      

  

Demo:

.css( propertyName, value )返回: jQuery

描述: 设置每个匹配元素的一个或多个CSS属性。

添加的版本:1 .0.css(propertyName, value )
- propertyName
  
  类型: String
  
  一个CSS属性名。
- value
  
  类型: String or Number
  
  设置这个CSS属性的值。
添加的版本:1.4.css( propertyName, function )
- propertyName
  
  类型: String
  
  一个CSS属性名。
- function
  
  类型: Function( Integer index, String value ) => String or Number
  
  一个用来返回设置值的函数。this 是当前元素。接收的集合中元素的索引位置和原来的值作为参数。
添加的版本:1.0.css( properties )
- properties
  
  类型: PlainObject
  
  一个用来设置的属性-值对的对象。

和.prop()方法一样，.css()方法使得设置元素的CSS属性快速而又简单。这个方法可以使用任何一个CSS属性名和用空格隔开的值，或者一个“键/值”对对象(JavaScript 对象符号)作为参数。

另外,jQuery可以同样解析CSS和用multiple-word（用横杠连接的词，比如：background-color）属性的DOM格式。举个例子：jquery能解析.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 和 .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})并且返回正确的值（注意这两条语句的单引号和“-”）。在 DOM 标记法中，属性名可以不使用引号包裹，但是在 CSS 标记法中，如果属性中含有连字符(-)的话，则必须用引号包裹。。

当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px(注：.css("width",50})，.css("width","50"})，.css("width",'50px'})这3条语句是等价的，具体可以查看 http://jsfiddle.net/feiwen8772/b78mgmdd/)。如果属性值需要非px的其他单位，请使用添加了合适单位的字符串（注：例如，'12em'）。

当.css() 作为一个设置函数使用的时候，jQuery修改元素的style（样式）属性。例如，$('#mydiv').css('color', 'green') 等价于 document.getElementById('mydiv').style.color = 'green'。样式属性的值设置为空字符串 — 例如，$('#mydiv').css('color', '') — 那么会从元素上移除该属性（若该属性存在的话），该属性之前可能是通过 jQuery 的 .css() 方法设置的 HTML style 属性，也有可能是通过直接对 style 属性进行 DOM 操作而被设置的。因此，该属性的元素样式将恢复到之前应用的任何值。所以，这种方法可用于还原先前已经执行的任何被修改的样式。它不会移除通过 CSS 规则或 <style> 元素设置的属性。 警告：一个值得注意的例外情况是，IE 8及以下版本，删除的简写属性，如边border 或者 background 将完全的删除该元素样式，不管是在样式表或<style>元素中。

注意: .css()忽略了!important声明！因此，语句$( "p" ).css( "color", "red !important" )，不会将页面中所有段落颜色转变为红色。强烈建议使用类（class）来代替; 否则请使用jQuery插件。

从jQuery 1.8开始，.css()的设置方法将自动为属性名加上前缀。例如， .css( "user-select", "none" )在 Chrome / Safari 浏览器将其设置为-webkit-user-select，在Firefox中将使用-moz-user-select，而IE10将使用 -ms-user-select。

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

这个例子设置一个匹配元素的宽度增加到较大的值。

注意: 如果设置函数没有返回任何东西(例如. function(index, style){})，或者如果返回undefined，当前的值不会改变。只有当某些条件得到满足，选择性的设定值的时后是有用的。

例子:

Example: 通过mouseover事件改变一些段落的颜色为红色。

  
          <!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="//code.jquery.com/jquery-latest.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>

Demo:

Example: 增加#box 的宽度为200像素

  
          <!DOCTYPE html>
<html>
<head>
  <style>
  #box { background: black; color: snow; width:100px; padding:10px; }
  </style>
  <script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <div id="box">Click me to grow</div>
 
<script>
  $("#box").one( "click", function () {
    $( this ).css( "width","+=200" );
  });
</script>
 
</body>
</html>

Demo:

Example: 突出段落中点击文本。

  
    
        
        
          <!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
  <script src="//code.jquery.com/jquery-latest.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>

        
      

  

Demo:

Example: 设置所有段落的文本颜色为红色背景为蓝色：

  
    
        
        
          <!DOCTYPE html>
<html>
<head>
  <style>
  p { color:green; }
</style>
  <script src="//code.jquery.com/jquery-latest.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>

        
      

  

Demo:

Example: 当你点击一个div的时候递增他的尺寸

  
    
        
        
          <!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 20px; height: 15px; background-color: #f33; }
  </style>
  <script src="//code.jquery.com/jquery-latest.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>

        
      

  

jQuery API中文文档

Contents:

.css( propertyName )返回: String

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

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

Example: 点击div，得到它的背景颜色

Demo:

Example: 点击div，得到宽度，高度，文本颜色，背景颜色。

Demo:

.css( propertyName, value )返回: jQuery

添加的版本:1 .0.css(propertyName, value )

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

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

Example: 通过mouseover事件改变一些段落的颜色为红色。

Demo:

Example: 增加#box 的宽度为200像素

Demo:

Example: 突出段落中点击文本。

Demo:

Example: 设置所有段落的文本颜色为红色背景为蓝色：

Demo:

Example: 当你点击一个div的时候递增他的尺寸

Demo: