有两种方法获取与设置div的宽高:使用尺寸函数或使用css方法

获取宽高

1. 尺寸函数:height() 获取高度,width() 获取宽度

2. css获取div宽高:css("height")获取高度,css("width")获取宽度

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



1. $(".div1").click(function() {  
2. // 1. 使用width() height()方法来获取宽高 返回的是整形数字
3. var divw = $(this).width();
4. var divh = $(this).height();
5. // 2.使用css方式获取宽高 带px的字符串
6. var divw = $(this).css("width");
7. var divh = $(this).css("height");
8. "div宽:" + divw + ";div高:" + divh);
9. });


两种弹出的值为:

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参数的属性名称不需要用引号扩起来


1. $("#update").click(function() {  
2. var divw = $("#w").val();
3. var divh = $("#h").val();
4.
5. // 1. 使用width() height()方法来设置div宽高
6. ".div1").width(divw).height(divh);
7.
8. // 2. 使用css的方式来设置宽高
9. ".div1").css({"width":divw+"px","height":divh+"px"});
10.
11. // 3. 使用函数链的方式写代码
12. // 注:使用css设置单个样式时,参数为css("width",divw+"px") 逗号分割
13. ".div1").css("width",divw+"px").css("height",divh+"px");
14.
15. // 4. 使用不同函数的函数链
16. ".div1").css("width",divw+"px").height(divh);
17.
18. // 5.animate()动画 宽高一块改变
19. ".div1").animate({width:divw+"px",height:divh+"px"},4000);
20.
21. // 6.animate()动画 先改变宽,再改变高
22. ".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);
23. });

html部分代码:




1. <!DOCTYPE html>  
2. <html>
3.
4. <head>
5. <meta charset="UTF-8">
6. <title></title>
7. <style type="text/css">
8. .div1 {
9. background-color: darkorange;
10. width: 200px;
11. height: 200px;
12. cursor: pointer;
13. }
14. </style>
15. <script src="js/jquery-1.12.3.min.js"></script>
16. </head>
17.
18. <body>
19. <p>宽:<input type="text" id="w" /></p>
20. <p>高:<input type="text" id="h" /></p>
21. <input type="button" value="修改尺寸" id="update" />
22.
23. <div class="div1"></div>
24. </body>
25. </html>