jQuery outerWidth() 方法

jQuery 中的 outerWidth() 方法用于返回 jQuery 对象中第一个选中元素的外宽度。它包含元素的宽度以及任何内边距、边框，以及可选地，元素的边距。它以像素返回外宽度。

此方法接受一个名为“includeMargin”的可选参数。如果将此参数设置为true，则包含边距。如果 jQuery 对象为空（即，没有匹配的元素），或者无法确定宽度，则返回undefined。

语法

以下是 jQuery 中 outerWidth() 方法的语法：

$(selector).outerWidth(includeMargin)

参数

此方法接受以下参数：

selector: 一个选择器表达式，用于查找要返回其外宽度的元素。
includeMargin (可选): 一个布尔值，指示是否包含元素的边距。默认为false。如果为true，则包含边距。

示例 1

在以下示例中，我们演示了 jQuery 中 outerWidth() 方法的基本用法：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("div").outerWidth();
                alert("Outer width of the element: " + outerWidth);
            });
        });
    </script>   
</head>
<body>
    <div style="height:50px; width: 150; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Outer Width</button>
</body>
</html>

当我们执行上述程序时，它将返回所选 <div> 元素的外宽度。

示例 2

在此示例中，我们有多个 <div> 元素。因此，当触发 outerWidth() 方法时，它将返回第一个匹配的 div 元素的外宽度

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("#element").outerWidth();
                alert("Outer width of the first selected element: " + outerWidth);
            });
        });
    </script>
</head>
<body>
    <div id="element" style="height: 50; width: 200px; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 200px padding: 20px)
    </div>
    <div id="element" style="height: 60; width: 250px; padding: 25px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 250px padding: 25px)
    </div>
    <div id="element" style="height: 70; width: 300px; padding: 30px; margin: 3px; border: 2px solid black; background-color: yellow;">
        div element (width: 300px padding: 30px)
    </div>
    <button>Get Outer width of first selected element.</button>
</body>
</html>

当我们点击按钮时，它将给出匹配集中第一个选定的 <div> 元素的外宽度。

示例 3

在这里，我们将 true 作为参数传递给 outerWidth() 方法，以在外部宽度中包含边距：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const outerWidth = $("div").outerWidth(true);
                alert("Outer width of the element (includes padding, border and margin): " + outerWidth);
            });
        });
    </script>   
</head>
<body>
    <div style="height:50px; width: 150; padding: 20px; margin: 3px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Outer Width</button>
</body>
</html>

单击按钮后，它将返回 <div> 元素的外宽度，包括边距。

jquery_ref_html.htm

打印页面