• jQuery Video Tutorials

jQuery - 尺寸

上一頁
下一頁

jQuery 提供了各種方法來獲取和設定各種屬性的 CSS 尺寸。下圖說明了如何為任何 HTML 元素描繪各種尺寸（寬度、高度、innerWidth、innerHeight、outerWidth、outerHeight）。

jQuery Dimensions

jQuery 尺寸方法

以下是用於操作 HTML 元素各種屬性的 CSS 尺寸的方法。

  • width() - 此方法獲取或設定元素的寬度

  • height() - 此方法獲取或設定元素的高度

  • innerWidth() - 此方法獲取或設定元素的內部寬度。

  • innerHeight() - 此方法獲取或設定元素的內部高度。

  • outerWidth() - 此方法獲取或設定元素的外部寬度。

  • outerHeight() 此方法獲取或設定元素的外部高度。

jQuery width() 方法

jQuery width() 方法獲取第一個匹配元素的寬度或設定每個匹配元素的寬度。

$(selector).width([val]);

我們可以使用或不使用val引數來使用width()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的寬度，但如果我們提供一個值作為引數，則它將設定所有匹配元素的寬度。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的寬度。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box width = " + $("div").width());
      });
      $("#b2").click(function(){
         $("div").width("400px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:140px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get width</button>
   <button id="b2">Set width</button>
</body>
</html>

jQuery height() 方法

jQuery height() 方法獲取第一個匹配元素的高度或設定每個匹配元素的寬度。

$(selector).height([val]);

我們可以使用或不使用val引數來使用height()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的高度，但如果我們提供一個值作為引數，則它將設定所有匹配元素的高度。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的高度。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box height = " + $("div").height());
      });
      $("#b2").click(function(){
         $("div").height("100px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:155px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get height</button>
   <button id="b2">Set height</button>
</body>
</html>

jQuery innerWidth() 方法

jQuery innerWidth() 方法獲取第一個匹配元素的innerWidth或設定每個匹配元素的innerWidth。

$(selector).innerWidth([val]);

我們可以使用或不使用val引數來使用innerWidth()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的innerWidth，但如果我們提供一個值作為引數，則它將設定所有匹配元素的innerWidth。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的innerWidth。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box innerWidth = " + $("div").innerWidth());
      });
      $("#b2").click(function(){
         $("div").innerWidth("400px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:140px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get width</button>
   <button id="b2">Set width</button>
</body>
</html>

jQuery innerHeight() 方法

jQuery innerHeight() 方法獲取第一個匹配元素的innerHeight或設定每個匹配元素的innerHeight。

$(selector).innerHeight([val]);

我們可以使用或不使用val引數來使用innerHeight()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的innerHeight，但如果我們提供一個值作為引數，則它將設定所有匹配元素的innerHeight。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的innerHeight。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box innerHeight = " + $("div").innerHeight());
      });
      $("#b2").click(function(){
         $("div").innerHeight("100px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:155px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get height</button>
   <button id="b2">Set height</button>
</body>
</html>

jQuery outerWidth() 方法

jQuery outerWidth() 方法獲取第一個匹配元素的outerWidth或設定每個匹配元素的outerWidth。

$(selector).outerWidth([val]);

我們可以使用或不使用val引數來使用outerWidth()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的outerWidth，但如果我們提供一個值作為引數，則它將設定所有匹配元素的outerWidth。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的outerWidth。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box outerWidth = " + $("div").outerWidth());
      });
      $("#b2").click(function(){
         $("div").outerWidth("400px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:140px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get width</button>
   <button id="b2">Set width</button>
</body>
</html>

jQuery outerHeight() 方法

jQuery outerHeight() 方法獲取第一個匹配元素的outerHeight或設定每個匹配元素的outerHeight。

$(selector).outerHeight([val]);

我們可以使用或不使用val引數來使用outerHeight()方法。如果我們不為此方法提供引數，則它將返回第一個匹配元素的outerHeight，但如果我們提供一個值作為引數，則它將設定所有匹配元素的outerHeight。

示例

讓我們嘗試以下示例來獲取和設定<div>元素的outerHeight。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert("Box outerHeight = " + $("div").outerHeight());
      });
      $("#b2").click(function(){
         $("div").outerHeight("100px");
      });
   });
</script>
<style>
   button{margin:10px;cursor:pointer}
   div{ margin:10px;padding:12px; width:155px;}
</style>
</head>
<body>
   <p>Click the below buttons to see the result:</p>

   <div style="background-color:#93ff93;">Box</div>

   <button id="b1">Get height</button>
   <button id="b2">Set height</button>
</body>
</html>

jQuery HTML/CSS 參考

您可以在以下頁面獲取所有用於操作 CSS 和 HTML 內容的 jQuery 方法的完整參考：jQuery HTML/CSS 參考。

列印頁面
上一頁
下一頁
廣告