外形尺寸

可以使用width（）和height（）方法來(lái)獲取和設(shè)置HTML元素的寬度和高度。

讓我們將div的寬度和高度設(shè)置為100px，并為其設(shè)置背景顏色：

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

$(" "). ( );

帶邊距的外形尺寸

width（）和height（）方法獲取并設(shè)置尺寸，而不需要填充，邊框和邊距。

innerWidth（）和innerHeight（）方法也包括填充。

outerWidth（）和outerHeight（）方法包括填充和邊框。

查看這張圖片了解他們的工作原理：

以下示例演示了該方法的工作原理：

HTML：

<div></div>

CSS:

div {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 3px solid blue;
  background-color: red;
  color: white;
}

JS:

$(function() {
  var txt = "";
  txt += "width: " + $("div").width() + " ";
  txt += "height: " + $("div").height() + "<br/>";
  txt += "innerWidth: " + $("div").innerWidth() + "  ";
  txt += "innerHeight: " + $("div").innerHeight() + "<br/>";
  txt += "outerWidth: " + $("div").outerWidth() + "  ";
  txt += "outerHeight: " + $("div").outerHeight();   
  $("div").html(txt);
});

運(yùn)行代碼以查看維度方法返回的值。

<div style="width: 200px"></div>

    <script>

      $(function () {

        $("div").css("padding", "5px");

        alert($("div").innerWidth());

      });

    </script>