• jQuery 视频教程

jQuery - 尺寸

jQuery 提供了各种方法来获取和设置各种属性的 CSS 尺寸。下图解释了如何为任何 HTML 元素描述各种尺寸（宽度、高度、innerWidth、innerHeight、outerWidth、outerHeight）：

jQuery 尺寸

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://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/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 externalWidth() 方法

jQuery的outerWidth()方法获取 第一个匹配元素的outerWidth或设置每个匹配元素的outerWidth。

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

我们可以使用带有或不带有val参数的externalWidth()方法。如果我们不向此方法提供参数，那么它将返回第一个匹配元素的outerWidth，但如果我们提供一个值作为参数，那么它将设置所有匹配元素的outerWidth。

例子

让我们尝试以下示例来获取和设置 <div> 元素的outerWidth。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/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参数的externalHeight()方法。如果我们不向此方法提供参数，那么它将返回第一个匹配元素的outerHeight，但如果我们提供一个值作为参数，那么它将设置所有匹配元素的outerHeight。

例子

让我们尝试以下示例来获取和设置 <div> 元素的outerHeight。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/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 参考。