jQuery获取盒子尺寸

height()

height() 取得匹配元素当前计算的高度值（px）

参数height([val|fn])

• 设定CSS中 ‘height’ 的值，方法中有一个参数，可以是字符串或者数字，还可以是一个函数
• 当参数为函数时，函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度

//height()中没有参数时则获取该元素的height值
var div1 = $("div").height();
console.log(div1);//输出div的height

//height()参数是一个参数为数值时
var div1 = $("div").height(100);//将div的height改为100px

//height()参数是一个函数时
$("div").height(function(index,height){
	 console.log(index);//元素在原先集合中的索引
	 console.log(height);//元素原有的height
	 return 500;//返回了一个height的值将div的height改为500px
});

width()

width() 取得第一个匹配元素当前计算的宽度值（px）

参数width([val|fn])

• 设定CSS中 ‘width’ 的值，方法中有一个参数，可以是字符串或者数字，还可以是一个函数
• 当参数为函数时，函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度

//width()中没有参数时则获取该元素的width值
var div1 = $("div").width();
console.log(div1);//输出div的width

//width()参数是一个参数为数值时
var div1 = $("div").width(100);//将div的width改为100px

//width()参数是一个函数时
$("div").width(function(index,width){
	 console.log(index);//元素在原先集合中的索引
	 console.log(width);//元素原有的width
	 return 500;//返回了一个height的值将div的width改为500px
});

innerHeight()

innerHeight() 获取第一个匹配元素内部区域高度，包括补白(内边距 padding)、不包括边框，此方法对可见和隐藏元素均有效

$("div").innerHeight();//包含height + padding

innerWidth()

innerWidth() 获取第一个匹配元素内部区域宽度，包括补白(内边距 padding)、不包括边框，此方法对可见和隐藏元素均有效

$("div").innerWidth();//包含witch + padding

outerHeight()

获取第一个匹配元素外部高度，默认包括补白(内边距 padding)和边框，此方法对可见和隐藏元素均有效

参数outerHeight([options])

• options可写可不写，设置为 true 时，计算外边距(margin)在内

//outerHeight()无参数时
$("div").outerHeight();//包含height + padding + border

//outerHeight()有参数为true时
 $("div").outerHeight(true);//包含height + padding + border + margin