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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。