JQuery——样式操作

JQuery中的样式操作

1. 直接设置样式

JQuery——样式操作

<script type="text/javascript">
   $(function(){
		$("dl").mouseover(function(){
			$(this).css({"border":"5px solid #E8DFC4","opacity":"0.5","cursor":"pointer"});
		});
		$("dl").mouseout(function(){
			$(this).css({"border":"5px solid #FFF","opacity":"1"});
		});
   });
</script>

2. 追加和移除样式

JQuery——样式操作

<script type="text/javascript">
  $(function(){
		$("h2").click(function(){
			$(this).addClass("style2 style3");
		});
		$("h2").mouseout(function(){
			$(this).removeClass("style3 style2");
		});
  });
</script>

3. 样式切换

点击一次就添加样式，再点击一次就删除样式

JQuery——样式操作

<script type="text/javascript">
	$(function(){
		$("dd").click(function(){
			$(this).toggleClass("current");
		});
	});
</script>