JQuery Dimensions es un método incorporado en jQuery que se utiliza para trabajar con las dimensiones de varios elementos y la ventana del navegador. Hay varios métodos de dimensión en JQuery Dimension.
Métodos de dimensión de jQuery:
- ancho(): este método establece o devuelve el ancho del elemento excluido relleno, borde con el margen.
- height(): este método establece o devuelve la altura del elemento de relleno excluido, borde con el margen.
- innerWidth(): este método establece o devuelve el ancho interno del elemento incluye relleno.
- innerHeight(): este método establece o devuelve la altura interna del elemento que incluye el relleno.
- outsideWidth(): este método establece o devuelve el ancho exterior del elemento, incluye relleno y borde.
- outerHeight(): este método establece o devuelve la altura exterior del elemento, incluye relleno y borde.
Nota: Todos los métodos establecen o devuelven el elemento <div> especificado.
Métodos JQuery width() y height(): En este ejemplo, verá en un elemento <div> especificado que el método devolverá el ancho y el alto del elemento.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Dimensions
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Width of div: " + $(".geeks").width() + "</br>";
txt += "Height of div: " + $(".geeks").height();
$(".geeks").html(txt);
});
});
</script>
<style>
.geeks {
height: 100px;
width: 350px;
padding: 5px;
margin: 3px;
border: 2px solid black;
background-color: #F0F3F4;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div class="geeks">
<h1>GeeksforGeeks</h1></div>
<br>
<button>Display width and height </button>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Métodos JQuery innerWidth() e innerHeight(): En este ejemplo, verá que en un elemento <div> especificado, el método devolverá el ancho interno y la altura interna del elemento.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Dimensions
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Inner width of div: " + $(".geeks").innerWidth() + "</br>";
txt += "Inner height of div: " + $(".geeks").innerHeight();
$(".geeks").html(txt);
});
});
</script>
<style>
.geeks {
height: 100px;
width: 350px;
padding: 5px;
margin: 3px;
border: 2px solid black;
background-color: #F0F3F4;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div class="geeks">
<h1>GeeksforGeeks</h1></div>
<br>
<button>Display Inner width and Inner height </button>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Métodos externalWidth() y outerHeight() de JQuery: En este ejemplo, verá que en un elemento <div> especificado, el método devolverá el ancho exterior y la altura exterior del elemento.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Dimensions
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Outer width of div: " + $(".geeks").outerWidth() + "</br>";
txt += "Outer height of div: " + $(".geeks").outerHeight();
$(".geeks").html(txt);
});
});
</script>
<style>
.geeks {
height: 100px;
width: 350px;
padding: 5px;
margin: 3px;
border: 2px solid black;
background-color: #F0F3F4;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div class="geeks">
<h1>GeeksforGeeks</h1></div>
<br>
<button>Display Outer width and Outer height </button>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
