jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

Beispiel

$("button").click(function(){
  var txt="";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
);

Versuchen Sie es selbst

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的 <div> 元素的 inner-width/height：

Beispiel

$("button").click(function(){
  var txt="";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Versuchen Sie es selbst

jQuery outerWidth() und outerHeight() Methoden

Die Methode outerWidth() gibt die Breite des Elements zurück (einschließlich Innenabstand und Rahmen).

Die Methode outerHeight() gibt die Höhe des Elements zurück (einschließlich Innenabstand und Rahmen).

Der folgende Beispielcode gibt die outer-width/height eines bestimmten <div>-Elements zurück:

Beispiel

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Versuchen Sie es selbst

Die Methode outerWidth(true) gibt die Breite des Elements zurück (einschließlich Innenabstand, Rahmen und Außenabstand).

Die Methode outerHeight(true) gibt die Höhe des Elements zurück (einschließlich Innenabstand, Rahmen und Außenabstand).

Beispiel

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Versuchen Sie es selbst

jQuery - Mehr über width() und height()

Der folgende Beispielcode gibt die Breite und Höhe des Dokuments (HTML-Dokument) und des Fensters (Browseransicht) zurück:

Beispiel

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Versuchen Sie es selbst

Der folgende Beispielcode setzt die Breite und Höhe eines bestimmten <div>-Elements fest:

Beispiel

$("button").click(function(){
  $("#div1").width(500).height(500);
);

Versuchen Sie es selbst

jQuery CSS Referenzhandbuch

Für eine vollständige Referenz zu jQuery Dimensions besuchen Sie unser jQuery Dimensions Referenzhandbuch.