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、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
#main{
background: #ccc;padding: 10px;float: left;
}
#div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}
</style>
</style>
</head>
<body>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<input id="btn1" type="button" value="获取">
<input id="btn2" type="button" value="设置">
<input id="btn3" type="button" value="设置2">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
alert($("#div1").width())
//width + padding
alert($("#div1").innerWidth())
//outerWidth() width + padding + border
alert($("#div1").outerWidth())
//outerWidth() width + padding + border+margin
alert($("#div1").outerWidth(true))
})
$('#btn2').click(function(){
$("#div1").width(50)
$('#div1').height(50)
}) $('#btn3').click(function(){
$("#main div").width(function(index,oldWidth){
//alert(index)
return oldWidth*(index+1)/5
})
})
})
</script>
</body>
</html>