Tamaño de jQuery

使用jQuery，可以轻松处理元素和浏览器窗口的尺寸。

jQuery提供了有效地操作元素尺寸的方法。

在本章中，我们将解释如何获取或设置HTML元素的尺寸。

jQuery尺寸方法

我们具有以下用于处理尺寸的jQuery方法：

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

下面将向您展示如何使用每种方法。

了解jQuery尺寸

请查看下图，以了解这些方法如何计算元素框的尺寸。

jQuery width()和height()方法

jQuery width()方法获取或设置所选元素的宽度（不包括内边距，边框和外边距）。

jQuery height()方法获取或设置所选元素的高度（不包括内边距，边框和外边距）。

以下示例获取DIV元素的宽度和高度：

$("div").click(function() {
　　let w = $(this).width();
　　let h = $(this).height();
　　$(this).html("Ancho del DIV: "　+　w　+　"<br>"　+　"Altura del DIV: "　+　h);
});

El siguiente ejemplo configura el ancho y la altura de todos los párrafos:

$("button").click(function(){
　　$("p").width(250);
　　$("p").height(100);
});

Métodos jQuery innerWidth() y innerHeight()

jQuery innerWidth()Método para obtener o configurar el ancho del elemento seleccionado (incluso el relleno interno).

jQuery innerHeight()Método para obtener o configurar la altura del elemento seleccionado (incluso el relleno interno).

El siguiente ejemplo obtiene el ancho y la altura interna del elemento DIV:

$("div").click(function() {
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("Ancho interno: "　+　w　+　"<br>"　+　"Altura interna: "　+　h);
});

Métodos jQuery externalWidth() y outsideHeight()

jQuery outerWidth()Método para obtener o configurar el ancho del elemento seleccionado (incluso el relleno interno y el borde).

jQuery outerHeight()Método para obtener o configurar la altura del elemento seleccionado (incluso el relleno interno y el borde).

El siguiente ejemplo obtiene el ancho y la altura exterior del elemento DIV:

$("div").click(function() {
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Ancho exterior: "　+　w　+　"<br>"　+　"Altura exterior: "　+　h);
});

outerWidth(true) Método para obtener o configurar el ancho del elemento seleccionado (incluso el relleno interno, el borde y el margen).

outerHeight(true) Este método obtiene o configura la altura del elemento seleccionado (incluso el relleno interno, el borde y el margen).

El siguiente ejemplo obtiene el ancho y la altura exterior del elemento DIV (incluso el margen):

$("div").click(function() {
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("Altura exterior[+margin]:"　+　w　+　"<br>"　+　"Altura exterior[+margin]: "　+　h);
});

Más ejemplos

Mostrar la diferencia entre width(), height(), innerWidth(), innerHeight(), outerWidth() y outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

También se pueden encontrar las alturas y anchos de la ventana y el documento:

$(window).width();//　Devuelve el ancho de la ventana del navegador
$(document).width();　　//　Devuelve el ancho del documento HTML
$(window).height();//　Devuelve la altura de la ventana del navegador
$(document).height();　　//　Devuelve la altura del documento HTML completo

Referencia de CSS de jQuery

Para obtener referencias completas de métodos CSS, visite nuestrajQuery HTML / Referencia de CSS.