Tamanho do 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("Largura do DIV: "　+　w　+　"<br>"　+　"Altura do DIV: "　+　h);
});

A seguir, um exemplo de como definir a largura e altura de todos os parágrafos:

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

Métodos jQuery innerWidth() e innerHeight()

jQuery innerWidth()Método para obter ou definir a largura do elemento selecionado (incluso margens internas).

jQuery innerHeight()Método para obter ou definir a altura do elemento selecionado (incluso margens internas).

A seguir, um exemplo de como obter a largura e altura interna de um elemento DIV:

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

Métodos jQuery externalWidth() e outsideHeight()

jQuery outerWidth()Método para obter ou definir a largura do elemento selecionado (incluso margens internas e bordas).

jQuery outerHeight()Método para obter ou definir a altura do elemento selecionado (incluso margens internas e bordas).

A seguir, um exemplo de como obter a largura e altura externa de um elemento DIV:

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

outerWidth(true) Método para obter ou definir a largura do elemento selecionado (incluso margens internas, bordas e margens).

outerHeight(true) Este método obtém ou define a altura do elemento selecionado (incluso margens internas, bordas e margens).

A seguir, um exemplo de como obter a largura e altura externa de um elemento DIV (incluso margens):

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

Mais exemplos

Exibe as diferenças entre width(), height(), innerWidth(), innerHeight(), outerWidth() e outerHeight():

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

Você também pode encontrar a largura e altura da janela e do documento:

$(window).width();//　Retornar a Largura da Janela do Navegador
$(document).width();　　//　Retornar a Largura do Documento HTML
$(window).height();//　Retornar a Altura da Janela do Navegador
$(document).height();　　//　Retornar a Altura do Documento HTML

Referência CSS do jQuery

Para referência completa dos métodos CSS, acesse nossojQuery HTML / Referência CSS.