jQuery | Método de ancho exterior()

El método outsideWidth() en jQuery se usa para devolver el valor del ancho exterior de un elemento que incluye borde y relleno.

Sintaxis:

$(selector).outerWidth( includemargin )

Parámetros: este método acepta el parámetro único includeMargin , que es opcional. Contiene un valor booleano y se usa para especificar si el margen se incluirá o no. Si includeMargin se establece en verdadero, se incluye el margen; de lo contrario, no se incluye el margen. De forma predeterminada, includeMargin se establece en falso.

Ejemplo 1: este ejemplo muestra el ancho exterior, incluido el margen.

<!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>

Antes Haga clic en el botón:

Después Haga clic en el botón:

Ejemplo 2: este ejemplo muestra el ancho exterior y no incluye el margen.

<!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>

Antes Haga clic en el botón:

Después Haga clic en el botón:

Publicación traducida automáticamente

Artículo escrito por AkshayGulati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *