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