细说 jQuery 样式篇（一） - 样式的获取与设置

在元素一篇学习了通过 addClass 方法可以为元素添加样式，但是对样式的操作不仅仅限于添加，例如取得元素特定样式，设置元素样式等等。

设置样式

jQuery 提供了一个 .css() 方法来操作样式，这个方法将获取样式设置样式的作用集中了在一起，非常方便我们对元素样式进行操作。

<div style="color: lightblue;font-size: 24px;">test</div>

我们来获取这个 div 的样式，单个样式可以这样来获得：

$('div').css('color') //rgb(173, 216, 230)

多个样式可以这样来获得：

    $('div').css(['color', 'font-size'])//Object {color: "rgb(173, 216, 230)", font-size: "24px"}

设置单个样式可以：

$('div').css('color', 'red')

设置多个样式可以：

$('div').css({'color': 'red', 'font-size': '26px'})

显示和隐藏元素

貌似通过 css('display', 'none') 就可以达到隐藏元素的效果，但是 jQuery 提供了一种更聪明的方法 hide 来给我们使用，之所以说它更聪明，是因为 hide 方法会记住元素在隐藏前 display 的值，这样再使用 show 方法时就可以恢复原本的 display 值。

<span style="display:block">click me</span>
<button>show</button>

jQuery 代码如下：

  $('span').click(function() {
    $(this).hide();
  });

  $('button').click(function() {
    $('span').show();
  });

将 span 的 display 值设为 block，所以表现为：

点击 span 后，span 消失：

点击 button 后，span 再次显示：

且此时的 display 值仍为 block。

参考

http://book.douban.com/subject/24669823/