jQuery Größe

使用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("DIV-Breite: "　+　w　+　"<br>"　+　"DIV-Höhe: "　+　h);
});

Nachfolgender Beispielcode setzt die Breite und Höhe aller Absätze:

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

jQuery-Methode innerWidth() und innerHeight()

jQuery innerWidth()Diese Methode liest oder setzt die Breite des ausgewählten Elements (einschließlich Innenabstand).

jQuery innerHeight()Diese Methode liest oder setzt die Höhe des ausgewählten Elements (einschließlich Innenabstand).

Nachfolgender Beispielcode ermittelt die innere Breite und innere Höhe eines DIV-Elements:

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("Innerbreite: "　+　w　+　"<br>"　+　"Innerhöhe: "　+　h);
});

jQuery-Methode externalWidth() und outsideHeight()

jQuery outerWidth()Diese Methode liest oder setzt die Breite des ausgewählten Elements (einschließlich Innenabstand und Rahmen).

jQuery outerHeight()Diese Methode liest oder setzt die Höhe des ausgewählten Elements (einschließlich Innenabstand und Rahmen).

Nachfolgender Beispielcode ermittelt die äußere Breite und äußere Höhe eines DIV-Elements:

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Außenbreite: "　+　w　+　"<br>"　+　"Außenhöhe: "　+　h);
});

outerWidth(true) Diese Methode liest oder setzt die Breite des ausgewählten Elements (einschließlich Innenabstand, Rahmen und Außenabstand).

outerHeight(true) Diese Methode liest oder setzt die Höhe des ausgewählten Elements (einschließlich Innenabstand, Rahmen und Außenabstand).

Nachfolgender Beispielcode ermittelt die äußere Breite und äußere Höhe eines DIV-Elements (einschließlich der Margen):

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("Außenbreite[+margin]:"　+　w　+　"<br>"　+　"Außenhöhe[+margin]: "　+　h);
});

Mehr Beispiele

Zeige die Unterschiede zwischen width(), height(), innerWidth(), innerHeight(), outerWidth() und outerHeight():

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

Sie können auch die Breite und Höhe des Fensters und des Dokuments finden:

$(window).width();//　Rückgabe der Breite des Browserfensters
$(document).width();　　//　Rückgabe der Breite des HTML-Dokuments
$(window).height();//　Rückgabe der Höhe des Browserfensters
$(document).height();　　//　Rückgabe der Höhe des HTML-Dokuments

jQuery CSS Referenz

Für eine vollständige Referenz der CSS Methoden besuchen Sie bitte unserejQuery HTML / CSS Referenz.