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.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面