height和width
$.width() 和$.height() 读写的是元素内容的宽高
innerHeight和innerWidth
innerHeight(): height+padding
innerWidth(): width+padding
outerHeight和outerWidth
outerHeight(false/true): height+padding+border 如果是true, 加上margin 默认是false
outerWidth(false/true): width+padding+border 如果是true, 加上margin 默认是false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<style>
div {
width: 100px;
height: 150px;
background: red;
padding: 10px;
border: 10px #fbd850 solid;
margin: 10px;
}
</style>
<script>
$(function(){
console.log($('div').height());//150
console.log($('div').width());//100
console.log($('div').innerHeight());//height:150 + border:20=170
console.log($('div').innerWidth());//height:150 + border:20=120
console.log($('div').outerHeight());//height:150 + border:20 + padding:20 =190
console.log($('div').outerHeight(true));//height:150 + border:20 + padding:20 + margin:20 = 210
console.log($('div').outerWidth());// width:100 + border:20 + padding:20 = 140
console.log($('div').outerWidth(true));//width:100 + border:20 + padding:20 + margin:20 = 160
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
