Taille 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("Largeur du DIV : "　+　w　+　"<br>"　+　"Hauteur du DIV : "　+　h);
});

L'exemple suivant définit la largeur et la hauteur de tous les paragraphes :

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

Méthodes jQuery innerWidth() et innerHeight()

jQuery innerWidth()Méthode pour récupérer ou définir la largeur de l'élément sélectionné (y compris les marge internes).

jQuery innerHeight()Méthode pour récupérer ou définir la hauteur de l'élément sélectionné (y compris les marge internes).

L'exemple suivant récupère la largeur et la hauteur interne d'un élément DIV :

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

Méthodes jQuery externalWidth() et outsideHeight()

jQuery outerWidth()Méthode pour récupérer ou définir la largeur de l'élément sélectionné (y compris les marge internes et les bordures).

jQuery outerHeight()Méthode pour récupérer ou définir la hauteur de l'élément sélectionné (y compris les marge internes et les bordures).

L'exemple suivant récupère la largeur et la hauteur extérieure d'un élément DIV :

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Largeur extérieure : "　+　w　+　"<br>"　+　"Hauteur extérieure : "　+　h);
});

outerWidth(true) Méthode pour récupérer ou définir la largeur de l'élément sélectionné (y compris les marge internes, les bordures et les marges externes).

outerHeight(true) Cette méthode récupère ou définit la hauteur de l'élément sélectionné (y compris les marge internes, les bordures et les marges externes).

L'exemple suivant récupère la largeur et la hauteur extérieure d'un élément DIV (y compris les marges) :

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

Plus d'exemples

Afficher les différences entre width(), height(), innerWidth(), innerHeight(), outerWidth() et outerHeight() :

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

Vous pouvez également trouver la largeur et la hauteur de la fenêtre et du document :

$(window).width();//　Retourner la largeur de la fenêtre du navigateur
$(document).width();　　//　Retourner la largeur du document HTML
$(window).height();//　Retourner la hauteur de la fenêtre du navigateur
$(document).height();　　//　Retourner la hauteur du document HTML

Référence jQuery CSS

Pour des références complètes sur les méthodes CSS, veuillez visiter notrejQuery HTML / Référence CSS.