有两种方法获取与设置div的宽高:使用尺寸函数或使用css方法
获取宽高
1. 尺寸函数:height() 获取高度,width() 获取宽度
2. css获取div宽高:css("height")获取高度,css("width")获取宽度
区别:尺寸函数获取的值为整型,而css获取的值为带px的字符串
$(".div1").click(function() {
// 1. 使用width() height()方法来获取宽高 返回的是整形数字
var divw = $(this).width();
var divh = $(this).height();
// 2.使用css方式获取宽高 带px的字符串
var divw = $(this).css("width");
var divh = $(this).css("height");
alert("div宽:" + divw + ";div高:" + divh);
});
两种弹出的值为:
div宽:100;div高:100
div宽:100px;div高:100px
设置宽高
第一种方法:使用尺寸函数设置 height(10) width(10)
第二种方法:使用css函数设置
css({"width":"10px","height":"10px"})//使用css设置多个属性时,放在大括号中属性间用逗号分隔
css("width","10px")//使用css设置单个属性时,将属性名称与属性值使用逗号分隔(不需要放到大括号中)
第三种方法:使用animate设置(具体用法在下个文章中)
.animate({width:"10px",height:"10px"},4000);//使用animate与css的参数不同之处在于:animate参数的属性名称不需要用引号扩起来
$("#update").click(function() {
var divw = $("#w").val();
var divh = $("#h").val();
// 1. 使用width() height()方法来设置div宽高
$(".div1").width(divw).height(divh);
// 2. 使用css的方式来设置宽高
$(".div1").css({"width":divw+"px","height":divh+"px"});
// 3. 使用函数链的方式写代码
// 注:使用css设置单个样式时,参数为css("width",divw+"px") 逗号分割
$(".div1").css("width",divw+"px").css("height",divh+"px");
// 4. 使用不同函数的函数链
$(".div1").css("width",divw+"px").height(divh);
// 5.animate()动画 宽高一块改变
$(".div1").animate({width:divw+"px",height:divh+"px"},4000);
// 6.animate()动画 先改变宽,再改变高
$(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);
});
html部分代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
background-color: darkorange;
width: 200px;
height: 200px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<p>宽:<input type="text" id="w" /></p>
<p>高:<input type="text" id="h" /></p>
<input type="button" value="修改尺寸" id="update" />
<div class="div1"></div>
</body>
</html>