学习使用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);
}); 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值