當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


JQuery outerWidth()用法及代碼示例


jQuery中的outerWidth()方法用於返回包含邊框和填充的元素的外部寬度值。

用法:

$(selector).outerWidth( includemargin )

參數:此方法接受可選的單個參數includeMargin。它包含布爾值,用於指定是否要包含邊距。如果includeMargin設置為true,則包括保證金,否則不包括保證金。默認情況下,includeMargin設置為false。


示例1:本示例顯示包括邊距在內的外部寬度。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        jQuery outerWidth() Method 
    </title> 
      
    <!-- Style to create box -->
    <style> 
        .GFG { 
            height: 200px; 
            width: 350px; 
            padding: 20px; 
            margin: 3px; 
            border: 3px solid green; 
            background-color: lightgreen; 
        } 
    </style> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <!-- Script to display outerWidth of 
        box including margin -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function(){ 
                alert("Outer width of div: "  
                + $("div").outerWidth(true)); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
      
    <button>outerwidth</button> 
   
    <div class="GFG"></div> 
  
</body> 
  
</html>

之前單擊按鈕:

單擊按鈕後:

示例2:本示例顯示外部寬度,不包括邊距。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        jQuery outerWidth() Method 
    </title> 
      
    <!-- Style to create box -->
    <style> 
        .GFG { 
            height: 200px; 
            width: 350px; 
            padding: 20px; 
            margin: 3px; 
            border: 3px solid green; 
            background-color: lightgreen; 
        } 
    </style> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <!-- Script to display outer width excluding margin -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                alert("Outer width of div: " 
                + $("div").outerWidth()); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <button>outerwidth</button> 
   
    <div class = "GFG"></div> 
   
</body> 
</html>

之前單擊按鈕:

單擊按鈕後:



相關用法


注:本文由純淨天空篩選整理自AkshayGulati大神的英文原創作品 jQuery | outerWidth() Method。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。