jQuery 獲取和設定元素的寬高

語言: CN / TW / HK

本節我們學習如何通過 jQuery 中提供的方法來獲取或者設定元素的寬度和高度。

jQuery 中用於獲取設定寬高的方法有如下所示:

方法 描述
width() 設定或返回元素的寬度
height() 設定或返回元素的高度
innerWidth() 返回元素的寬度,包括內邊距
innerHeight() 返回元素的高度,包括內邊距
outerWidth() 返回元素的寬度,包括內邊距和邊框
outerHeight() 返回元素的高度,包括內邊距和邊框

width()和height()方法

width() 方法和 height() 方法其實從字面意思就可以看出它們的作用,width() 方法用於設定或返回元素的寬度, height() 方法用於設定或返回元素的高度。

但是要注意,寬度和高度都不包括元素的內邊距、外邊距和邊框的寬度。

示例:

例如我們獲取下面這個矩形的寬度和高度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var w = $(".rect").width();
      var h = $(".rect").height();
      alert("元素的寬為:" + w + ", 元素的高為:" + h);
    });
  });
</script>
<style>
  .rect{
    width: 300px;
    height: 150px;
    background-color: salmon;
  }
</style>
</head>
<body>
  <div class="rect"></div>
  <p><button>獲取元素寬和高</button></p>
</body>
</html>

在瀏覽器中的演示效果:

除了獲取元素的寬和高,width() 方法和 height() 方法還可以用於設定元素的寬和高。

示例:

例如我們看下面這個例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").width("300px");
      $(".rect").height("150px");
    });
  });
</script>
<style>
  .rect{
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
</style>
</head>
<body>
  <div class="rect"></div>
  <p><button>設定元素寬和高</button></p>
</body>
</html>

上述程式碼中,元素的寬和高原本為 50px,然後我們通過 width() 方法和 height() 方法將元素的寬和高設定為 300px150px。當點選按鈕時,元素的寬和高發生改變。

在瀏覽器中的演示效果:

innerWidth()和 innerHeight()方法

innerWidth() 方法用於返回元素的寬度。innerHeight() 方法用於關於返回元素的高度,包括內邊距。

注意這兩個方法返回的寬和高,包括內邊距,但是不包括外邊距和邊框寬度。

示例:

例如下面這個例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var w = $(".rect").innerWidth();
      var h = $(".rect").innerHeight();
      alert("元素的寬為:" + w + ",元素的高為:" + h);
    });
  });
</script>
<style>
  .rect{
    width: 100px;
    height: 100px;
    background-color: salmon;
    padding: 10px;
    border: 5px solid #ccc;
  }
</style>
</head>
<body>
  <div class="rect"></div>
  <p><button>獲取元素寬和高</button></p>
</body>
</html>

上述程式碼中,我們設定了 rect 元素的寬和高分別為 100px,內邊距為 10px,外邊距為 10px ,邊框寬度為 5px。因為 innerWidth() 方法返回的是元素的“寬 + 左右內邊距”,innerHeight() 方法返回的是元素的“高 + 上下內邊距”,我們來看一下最終結果:

outerWidth()和 outerHeight()方法

outerWidth() 方法用於返回元素的寬度,outerHeight() 方法用於返回元素的高度。這兩個方法返回的高和寬都包括元素的內邊距和邊框寬度。

示例:

我們將上面示例中的 innerWidth()innerHeight() 方法改為 outerWidth() 方法和 outerHeight() 方法,看看有什麼不同:

$(function(){
    $("button").click(function(){
      var w = $(".rect").outerWidth();
      var h = $(".rect").outerHeight();
      alert("元素的寬為:" + w + ",元素的高為:" + h);
    });
});

在瀏覽器中的演示效果:

可以看到,使用 outerWidth() 方法和 outerHeight() 方法獲取元素的寬和高,最終輸出結果為 130px ,比上述示例中多 10px,這 10px 其實就是元素的上下邊框和左右邊框之和。