细说 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/
您可能感兴趣的文章:
细说 jQuery 样式篇(一) – 样式的获取与设置
jQuery源码分析系列
细说 jQuery Ajax操作篇(一) – 数据加载
细说 jQuery 事件篇(二) – 处理简单事件
细说 jQuery Ajax操作篇(三) – 过程处理
细说 jQuery Ajax操作篇(二) – 数据传递
细说 jQuery 元素篇(二) – 选择符
jquery post时content-type的几种取值
细说 jQuery 元素篇(一) – 理解 DOM
细说 jQuery 事件篇(四) – 改变事件过程