盒子尺寸
方法 | 说明 |
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>