jQuery 提供了 width() 、 height() 、innerWidth() 、innerHeight() 、 outerWidth() 、 outerHeight() 用来处理元素和浏览器窗口的尺寸

jQuery 尺寸方法

jQuery 提供六个方法用来处理尺寸

1. width()
2. height()
3. innerWidth()
4. innerHeight()
5. outerWidth()
6. outerHeight()

jQuery 尺寸

jQuery width() 和 height() 方法

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

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

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

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

运行范例 »

jQuery innerWidth() 和 innerHeight() 方法

jQuery innerWidth() 方法返回元素的宽度，包括内边距

jQuery innerHeight() 方法返回元素的高度，包括内边距

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

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

运行范例 »

jQuery outerWidth() 和 outerHeight() 方法

jQuery outerWidth() 方法返回元素的宽度，包括内边距和边框

jQuery outerHeight() 方法返回元素的高度，包括内边距和边框

下面的范例返回指定的 <div> 元素的 outer-width/height

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

运行范例