Jquery 简明教程

jQuery - Dimensions

jQuery 提供了各种方法来获取和设置各种属性的 CSS 维度。下图解释了如何描述任何 HTML 元素的各种维度（宽度、高度、内部宽度、内部高度、外部宽度、外部高度）：

jQuery provides various methods to get and set the CSS dimensions for the various properties. Following diagram explains how various dimensions (width, height, innerWidth, innerHeight, outerWidth, outerHeight) can be depicted for any HTML element:

jQuery Dimension Methods

以下是操作 HTML 元素各种属性的 CSS 维度的函数。

Following are the methods to manipulate CSS dimensions for the various properties of the HTML elements.

  1. width() - This method gets or sets the width of an element

  2. height() - This method gets or sets the height of an element

  3. innerWidth() - This method gets or sets the inner width of an element.

  4. innerHeight() - This method gets or sets the inner height of an element.

  5. outerWidth() - This method gets or sets the outer width of an element.

  6. outerHeight() This method gets or sets the outer height of an element.

jQuery width() Method

jQuery width() 方法获取第一个匹配元素的宽度，或设置所有匹配元素的宽度。

jQuery width() method gets the width for the first matched element or set the width of every matched element(s).

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

我们可以使用 width() 方法，也可以不使用 val 参数。如果我们没有为此方法提供参数，那么它将返回第一个匹配元素的宽度，但如果我们提供一个值作为参数，那么它将设定所有匹配元素的宽度。

We can use width() method with or without val parameter. If we do not provide a parameter to this method then it will return the width of the first matched element but if we provide a value as the parameter then it will set the width of all the matched elements.

Example

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

Let’s try the following example to get and set the width of a <div> element.

<!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() Method

jQuery height() 方法获取第一个匹配元素的高度，或设置所有匹配元素的高度。

jQuery height() method gets the height for the first matched element or set the width of every matched element(s).

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

我们可以使用 height() 方法，也可以不使用 val 参数。如果我们没有为此方法提供参数，那么它将返回第一个匹配元素的高度，但如果我们提供一个值作为参数，那么它将设定所有匹配元素的高度。

We can use height() method with or without val parameter. If we do not provide a parameter to this method then it will return the height of the first matched element but if we provide a value as the parameter then it will set the height of all the matched elements.

Example

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

Let’s try the following example to get and set the height of a <div> element.

<!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() Method

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

jQuery innerWidth() method gets the innerWidth for the first matched element or set the innerWidth of every matched element(s).

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

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

We can use innerWidth() method with or without val parameter. If we do not provide a parameter to this method then it will return the innerWidth of the first matched element but if we provide a value as the parameter then it will set the innerWidth of all the matched elements.

Example

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

Let’s try the following example to get and set the innerWidth of a <div> element.

<!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() Method

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

jQuery innerHeight() method gets the innerHeight for the first matched element or set the innerHeight of every matched element(s).

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

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

We can use innerHeight() method with or without val parameter. If we do not provide a parameter to this method then it will return the innerHeight of the first matched element but if we provide a value as the parameter then it will set the innerHeight of all the matched elements.

Example

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

Let’s try the following example to get and set the innerHeight of a <div> element.

<!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 outerWidth() Method

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

jQuery outerWidth() method gets the outerWidth for the first matched element or set the outerWidth of every matched element(s).

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

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

We can use outerWidth() method with or without val parameter. If we do not provide a parameter to this method then it will return the outerWidth of the first matched element but if we provide a value as the parameter then it will set the outerWidth of all the matched elements.

Example

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

Let’s try the following example to get and set the outerWidth of a <div> element.

<!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() Method

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

jQuery outerHeight() method gets the outerHeight for the first matched element or set the outerHeight of every matched element(s).

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

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

We can use outerHeight() method with or without val parameter. If we do not provide a parameter to this method then it will return the outerHeight of the first matched element but if we provide a value as the parameter then it will set the outerHeight of all the matched elements.

Example

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

Let’s try the following example to get and set the outerHeight of a <div> element.

<!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 Reference

您可以在以下页面获取用来操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考： jQuery HTML/CSS Reference 。

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.