js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
一、总结
一句话总结：jquery里面多是方法啊，比如jquery对象的宽高。所以取值是方法，赋值就是方法里面带参数。
1、百度富文本编辑器ueditor如何设置宽高？
jquery对象的width()和height()方法
37 $('#btn2').click(function(){
38 $("#div1").width(50)
39 $('#div1').height(50)
40 })
2、juqery对象的宽高对应的三个方法是什么，分别表示什么意思？
元素的宽度高度
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- innerWidth() 方法返回元素的宽度（包括内边距）
- outerWidth() 方法返回元素的宽度（包括内边距和边框）
- height()、innerHeight()、outerHeight()与宽度类似
3、juqery对象如何设置一个表示全副武装的宽度（包括相关的一切）？
outerWidth()方法加true参数
34 //outerWidth() width + padding + border+margin
35 alert($("#div1").outerWidth(true))
4、juqery对象的innerWidth()方法包括的是哪个边距？
内边距 padding
5、jquery的匿名函数中的index参数表示什么意思？
因为jquery对象多是集合，所以index就是表示所选元素的下标
43 $("#main div").width(function(index,oldWidth){
44 //alert(index)
45 return oldWidth*(index+1)/5
46 })
二、jquery如何获取和设置元素的宽高
1、相关知识
元素的宽度高度
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- innerWidth() 方法返回元素的宽度（包括内边距）
- outerWidth() 方法返回元素的宽度（包括内边距和边框）
- height()、innerHeight()、outerHeight()与宽度类似
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 #main{ 11 background: #ccc;padding: 10px;float: left; 12 } 13 #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;} 14 </style> 15 </style> 16 </head> 17 <body> 18 <div id="main"> 19 <div id="div1"></div> 20 <div id="div2"></div> 21 <div id="div3"></div> 22 </div> 23 <input id="btn1" type="button" value="获取"> 24 <input id="btn2" type="button" value="设置"> 25 <input id="btn3" type="button" value="设置2"> 26 <script type="text/javascript"> 27 $(function(){ 28 $('#btn1').click(function(){ 29 alert($("#div1").width()) 30 //width + padding 31 alert($("#div1").innerWidth()) 32 //outerWidth() width + padding + border 33 alert($("#div1").outerWidth()) 34 //outerWidth() width + padding + border+margin 35 alert($("#div1").outerWidth(true)) 36 }) 37 $('#btn2').click(function(){ 38 $("#div1").width(50) 39 $('#div1').height(50) 40 }) 41 42 $('#btn3').click(function(){ 43 $("#main div").width(function(index,oldWidth){ 44 //alert(index) 45 return oldWidth*(index+1)/5 46 }) 47 }) 48 }) 49 </script> 50 </body> 51 </html>