使用jQuery改变元素的CSS样式

一、获取并设置css类

操作css的 方法有以下几种：

• addClass() -向被选元素添加一个或多个类。
• removeClass() -向被选元素添加一个或多个类。
• toggleClass() -对备选元素进行添加/删除类的切换操作。
• css() -设置或返回样式属性。

//前两种方法操作很简单，就不去演示了，toggleClass方法更实用一些。
$("button").click(function(){
	//给三个元素切换样式  如果有此类名则去除，如果没有则添加。
	$("h1,h2,p").toggleClass("blue");
})

二、css方法

//参数直接是一个或多个样式属性，则结果返回样式值
$("p").css("background-color","yellow");

//设置css属性，参数可以是一个对象
$("p").css({"background-color":"yellow","font-size":"100%"})

三、jQuery尺寸

提供多个处理尺寸的重要方法：

//width(),height()方法分别返回设置元素的宽度(不包括内边距，边框或外边距)
$("#button1").click(function(){
	var Width=$("#div").width();
	var Height=$("#div").height();
	//显示div元素的高度和宽度
	$("#div").html("div的宽是"+Width+"div的高是:"+Height);
})
$("button2").click(function(){
//设置div元素的宽度为100px ,元素的高度为100px
	var Rwidth=$("#div").width("100px");
	var Rheight=$("#div").height("100px");
})

innerWidth() 和innerHeight()方法同样的用法，不同的是，这两种方法包括内边距；

outerWidth()和outerHeight()方法同样的用法，不同的是，这两种方法包括内边距和边框；