阅读本节前，请先回忆一下《CSS Box模式》和《CSS Box-sizing》这两节。

jQuery尺寸相关方法

jQuery中与尺寸相关的常用方法如下：

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

回忆一下HTML元素的Box模式

如下所示，如果用Box的视角去看一个HTML元素，则包括四部分，margins（外边距）、borders（边框）、padding（内边距）和content（实际内容）。

jQuery尺寸相关方法则如下对应：

---

当box-sizing取值border-box时，CSS中的width和height属性会把padding内边距、border边框也包括进来，但是jQuery的width()和height()方法依旧如上，不会把padding和border包括进来。

---

width() 和 height() 方法

jQuery中的width()方法可以获取或设置元素的宽度；height()方法可以获取或设置元素的高度。jQuery中的width()和height()方法所涉及到的宽度和高度如上图所示，特指content实际内容部分（不包括padding内边距和border边框）。

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

运行一下

innerWidth() 和 innerHeight() 方法

jQuery中的innerWidth()方法可以获取元素的宽度（包括padding内边距部分）；innerHeight()方法可以获取元素的高度（包括padding内边距部分）。

$("button").click(function(){
    var txt = "";
    txt += "宽度innerWidth：" + $("#div1").innerWidth() + "px</br>";
    txt += "高度innerHeight：" + $("#div1").innerHeight() + "px";
    $("#div1").html(txt);
});

运行一下

outerWidth() 和 outerHeight() 方法

jQuery中的outerWidth()方法可以获取元素的宽度（包括padding内边距和border边框部分）；outerHeight()方法可以获取元素的高度（包括padding内边距和border边框部分）。

$("button").click(function(){
    var txt = "";
    txt += "宽度outerWidth：" + $("#div1").outerWidth() + "px</br>";
    txt += "高度outerHeight：" + $("#div1").outerHeight() + "px";
    $("#div1").html(txt);
});

运行一下

如果想把margin部分也包括进来呢？把true参数传进去即ok啦~
jQuery中的outerWidth(true)方法可以获取元素的宽度（包括padding内边距、border边框部分和margin外边距部分）；outerHeight(true)方法可以获取元素的高度（包括padding内边距、border边框部分和margin外边距部分）。

$("button").click(function(){
    var txt = "";
    txt += "宽度outerWidth：" + $("#div1").outerWidth(true) + "px</br>";
    txt += "高度outerHeight：" + $("#div1").outerHeight(true) + "px";
    $("#div1").html(txt);
});

运行一下

width()和height()方法来设置元素高宽

jQuery中的width()和height()方法还可以设置元素宽度和高度，其设置的是content实际内容部分的宽度和高度，如本小节上方的示意图所示。因此，jQuery中上述两种方法设置的并不一定是元素的CSS中的width属性和height属性。

$("#div1").width(500);
$("#div1").height(250);

运行一下

把所有HTML元素的box-sizing属性取值border-box是一种更为推荐的实践方式，因为在CSS样式表中能更直观精准地定义元素高度和宽度。而上述jQuery原生的width()方法和height()方法似乎不是最佳的选择，因此，这里并不推荐直接使用width()方法和height()来设置元素宽度和高度。

而是推荐通过jQuery直接操作元素CSS样式表中的width属性和height属性，jQuery设置元素宽度高度的最佳实践方式如下所示：

$("#div1").css("width", "500px");
$("#div1").css("height", "250px");

运行一下

获取document和window的高宽

jQuery可用上述方式width()方法和height()方法分别获取document（HTML文档）和window（浏览器视窗）的高度和宽度。

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

运行一下