jQuery.盒子尺寸
盒子尺寸
| 方法 | 说明 |
| height() | 获取和设置盒子的高度，不包含内边距，外边距和边框。 |
| width() | 获取和设置盒子的宽度，不包含内边距，外边据和边框。 |
| inbrHeight() | 获取盒子的高度包含内边距，不包含边框和外边距。 |
| inerWidt() | 获取盒子的宽度包含内边距，不包含边框和外边距。 |
| outerHeight() | 获取盒子的高度包含内边距和边框，不包含外边距。 |
| outerWidth() | 获取盒子的宽度包含内边距和边框，不包含外边距。 |
| outerHeight(true) | 获取盒子的宽度包含内边距、边框、外边距。 |
| outer Width(true) | 获取盒子的宽度包含内边距、边框、外边距。 |
<!DOCTYPE html>
<html>
<head>
<title>盒子大小</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
li{
width: 125px;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<ul>
<li id="a">jhgffd</li>
<li id="b">rgegfe</li>
<li id="c">njnfsd</li>
<li id="d">bhgvdd</li>
<li id="e">jhgffd</li>
<li id="f">rgegfe</li>
<li id="g">njnfsd</li>
<li id="h">bhgvdd</li>
</ul>
</div>
<button>修改尺寸</button>
<script>
$('button').on('click', function () {
$('#a').height("90");
$('#b').width("80");
$('#c').inerHeight("1500");
$('#d').inerWidth("9000");
$('#e').outerHeight("800");
$('#f').outerWidth("1500");
$('#g').outerHeight(true);
$('#h').outerWidth(true);
});
</script>
</body>
</html>
