学习使用jquery给指定div设置宽度和高度

获取宽高

1. 使用尺寸函数

height() 获取高度，width() 获取宽度

2. 使用css方法

css获取div宽高：

css(“height”)获取高度，css(“width”)获取宽度

//使用css的方式来设置宽高
$(".div").css({"width":divWidth+"px", "height":divHeight+"px"});

区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串

$(".divClass").click(function() {
		// 使用width() height()方法来获取宽高 返回的是整形数字
		var divWidth = $(this).width();
		var divHeight = $(this).height();
		// 使用css方法获取宽高 返回的是带px的字符串
		var divWidth = $(this).css("width");
		var divHeight = $(this).css("height");
		alert("div宽:" + divWidth + ";div高:" + divHeight);
});

两种方法弹出的值分别为：

div宽:100;div高:100
div宽:100px;div高:100px

设置宽高

1、使用尺寸函数

div.height(100);
div.width(100);

2、使用css函数

div.css({"width":"10px","height":"10px"}); //使用css设置多个属性时，放在大括号中属性间用逗号分隔
div.css("width","10px"); //使用css设置单个属性时，将属性名称与属性值使用逗号分隔(不需要放到大括号中)

3、使用animate设置

//使用animate与css的方法不同之处在于：animate参数的属性名称不需要用引号包起来
div.animate({width:"100px",height:"100px"}, 1000);

4、总结

$("#update").click(function() {
	
	var divWidth = $("#width").val();
	
	var divHeight = $("#height").val();
	
	// 1. 使用width() height()方法来设置div宽高
	
	$(".div").width(divWidth).height(divHeight);
	
	// 2. 使用css的方式来设置宽高
	
	$(".div").css({"width":divWidth+"px", "height":divHeight+"px"});
	
	// 3. 使用函数链的方式写代码
	
	// 注：使用css设置单个样式时，参数为css("width", divWidth+"px") 逗号分割
	
	$(".div").css("width", divWidth+"px").css("height", divHeight+"px");
	
	// 4. 使用不同函数的函数链
	
	$(".div").css("width", divWidth+"px").height(divHeight);
	
	// 5.animate()动画 宽高一块改变
	
	$(".div").animate({width:divWidth+"px", height:divHeight+"px"}, 4000);
	
	// 6.animate()动画 先改变宽，再改变高
	$(".div").animate({width:divWidth+"px"}, 4000).animate({height:divHeight+"px"}, 4000);
});