当需要获取一个元素的宽度时,通常会使用 width()
方法。但有时候我们需要获取包括 padding、border、margin 在内的盒子模型的宽度,而这时可以使用 outerWidth()
方法。
outerWidth()
方法的语法
$(selector).outerWidth([options]);
其中,selector
表示调用此方法的元素,options
是一个可选参数,用于控制计算方式和包括哪些部分。
outerWidth()
方法的用法
调用 outerWidth()
方法可以获得 selector
元素的宽度,包括其内容宽度、内边距宽度、边框宽度以及(可选)外边距宽度。以下是 options
参数的可选值:
options
:margin
:表示是否包括元素的外边距。默认值为false
,即不包括。border
:表示是否包括元素的边框宽度。默认值为false
,即不包括。padding
:表示是否包括元素的内边距宽度。默认值为false
,即不包括。
如果仅需获取内容宽度,可以使用 innerWidth()
方法。
示例1
以下示例演示了如何使用 outerWidth()
方法获取一个元素的盒子模型宽度,包括内边距和边框,并将其输出到控制台:
<!DOCTYPE html>
<html>
<head>
<title>示例1:使用 outerWidth 方法</title>
<style>
.box1 {
background-color: lightblue;
padding: 10px;
border: 2px solid black;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var width1 = $('.box1').outerWidth();
var width2 = $('.box1').outerWidth(true);
console.log('宽度(不包括外边距):' + width1); // 184
console.log('宽度(包括外边距):' + width2); // 208
});
</script>
</head>
<body>
<div class="box1">这是一个盒子</div>
</body>
</html>
此示例中,首先定义了一个具有内边距和边框的 .box1
元素,并使用 outerWidth()
方法获取其宽度。
在调用 outerWidth()
方法时:
- 如果不传入任何参数,则默认不包括元素的外边距宽度,此时返回的值为
184
。 - 如果传入
true
参数,则会包括外边距宽度,此时返回的宽度为208
。
示例2
以下示例演示了如何使用 outerWidth()
方法获取所有选项卡的总宽度,并根据总宽度自动调整选项卡的宽度:
<!DOCTYPE html>
<html>
<head>
<title>示例2:自适应选项卡宽度</title>
<style>
#tab {
display: flex;
border: 1px solid black;
width: 80%;
margin: 20px auto;
}
.tab-item {
padding: 20px;
border: 1px solid gray;
flex-grow: 1;
flex-shrink: 1;
text-align: center;
cursor: pointer;
}
.active {
background-color: lightgray;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var totalWidth = $('#tab').outerWidth();
var tabCount = $('.tab-item').length;
var tabWidth = totalWidth / tabCount;
$('.tab-item').outerWidth(tabWidth);
$('.tab-item').on('click', function() {
$('.tab-item').removeClass('active');
$(this).addClass('active');
});
});
</script>
</head>
<body>
<div id="tab">
<div class="tab-item active">选项1</div>
<div class="tab-item">选项2</div>
<div class="tab-item">选项3</div>
<div class="tab-item">选项4</div>
</div>
</body>
</html>
此示例中,首先使用 outerWidth()
方法获取选项卡容器 #tab
的总宽度。然后,统计选项卡的数量,并根据总宽度和选项卡数量计算每个选项卡应有的宽度,最后使用 outerWidth()
方法将每个选项卡的宽度设置为计算出的值。这样,即可实现一个自适应宽度的选项卡组件。
在点击任意一个选项卡时,会为其添加 .active
类,以便于高亮显示当前选中的选项卡。