jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: StringString .css( String propertyName )

描述: 获取匹配元素集中第一个元素的样式属性值。
  • version added: 1.0
  • .css( String propertyName )
  • propertyName 一个css属性。

The .css()方法是一个便于获取第一个匹配元素样式属性值的方式 , 尤其是在不同的浏览器下访问这些属性(在标准浏览器中的getComputedStyle()相当于Internet Explorer中的currentStyle 和 runtimeStyle )。举个例子, Internet Explorer的DOM 将float 属性 当作 styleFloat实现,标准浏览器将float 属性 当作cssFloat。 .css() 方法 解决了这些差异,无论我们使用那一项都会返回同样的结果。举个例子了,下文的三行代码中的这个左浮元素将返回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'),其他的也是如此。

Examples:

例子:

取得当前点击的div背景颜色。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { width:60px; height:60px; margin:5px; float:left; }</style>
</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:

Returns: jQueryjQuery .css( Map map )

描述: 为匹配的元素设置一个或多个CSS属性。
  • version added: 1.0
  • .css( String propertyName, String | Number value )
  • propertyName CSS属性名称.
    value CSS属性的值。
  • version added: 1.4
  • .css( String propertyName, Function function(index, value) )
  • propertyName CSS属性名称.
    function(index, value) 一个返回设置值的函数。接收元素的索引位置和元素旧的样式属性值作为参数。
  • version added: 1.0
  • .css( Map map )
  • map 用于设置样式的键值对组成的json数据

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

自jQuery 1.4, .css() 允许我们传递一个函数作为属性值:

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

这个例子设置匹配元素的宽度递增。

Examples:

例子:

当鼠标移到p元素上时改变其颜色为红色。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { color:blue; width:200px; font-size:14px; }</style>
</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:

例子:

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

Demo:

例子:

高亮显示p元素中点击的单词。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { color:blue; font-weight:bold; cursor:pointer; }</style>
</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:

例子:

设置所有的p元素背景为蓝色字体为红色:
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { color:green; }</style>
</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:

例子:

当div被点击时增加div的大小:
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { width: 20px; height: 15px; background-color: #f33; }</style>
</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>

Demo: