.css()

Contents:

.css( propertyName ) 返回: String

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

  • version added: 1.0.css( propertyName )

    propertyName一个css属性名

.css()方法是为匹配的元素集合中获取第一个元素的样式属性值简单方法,特别是针对不同的浏览器能访问大多数的性质(在标准浏览器中的getComputedStyle()相当于Internet Explorer中的currentStyleruntimeStyle )和不同类型的浏览器某几个属性 。举个例子, 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和用multiple-word(用横杠连接的词,比如:background-color)属性格式化的DOM。举个例子:jquery能解析.css('background-color').css('backgroundColor')并且返回正确的值。

简写速写的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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Demo:

.css( propertyName, value ) 返回: jQuery

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

  • version added: 1.0.css( propertyName, value )

    propertyName一个CSS属性名

    value一个CSS属性名的值

  • version added: 1.4.css( propertyName, function(index, value) )

    propertyName一个CSS属性名

    function(index, value)一个返回设置值的函数。接收元素的索引位置和元素旧的样式属性值作为参数。

  • version added: 1.0.css( map )

    mapA map of property-value pairs to set.

.attr()方法一样,.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的符号,属性名名两边的引号是可选的,但是如果属性名包含 "-"的话,必须使用引号。

.attr()一样, .css()允许我们传递一个函数用于传递属性值:

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

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

举例:

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

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

Demo:

例子: 突出段落中点击文本。

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

Demo:

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

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

Demo:

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

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

Demo:

设计酷,jquery1.6 api中文手册