jQuery outerWidth()方法

  • Post category:jquery

当需要获取一个元素的宽度时,通常会使用 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 类,以便于高亮显示当前选中的选项卡。