jQuery 如何动态设置div元素的高度和宽度

在本文中，我们将学习如何使用jQuery及其方法（如height()和width()）动态设置div元素的高度和宽度。

在Web开发中，经常有需要根据特定条件或用户交互动态调整

元素的高度和宽度的场景。我们可以使用流行的JavaScript库jQuery轻松实现这一点。

让我们通过一些示例来理解如何实现这一点。

示例1

在这个示例中，我们将使用height()和width() jQuery方法，在文档加载和渲染时动态设置div容器的高度和宽度。

文件名: index.html

<html lang="en">
   <head>
      <title>How to dynamically set the height and width of a div element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

   <style>
      #myDiv {
         background-color: #ccc;
         border: 1px solid #000;
      }
   </style>
   </head>
   <body>
      <h3>How to dynamically set the height and width of a div element using jQuery?</h3>
      <div id="myDiv">

      </div>
      <script>
          $(document).ready(function() { const divElement =$ ("#myDiv");

            divElement.height(200); // Set the height to 200 pixels
            divElement.width(300); // Set the width to 300 pixels
         });
      </script>
   </body>
</html>

示例2

在此示例中，我们将按照上述代码模式进行操作，并通过3种不同的方法来改变div容器的高度和宽度，使用attr方法将高度和宽度设置为200px和300px，使用height和width属性将高度和宽度设置为100px和200px，并使用jQuery的animate方法将高度和宽度分别设置为300px和400px。

文件名：index.html

<html lang="en">
<head>
   <title>How to dynamically set the height and width of a div element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

   <style>
      #myDiv {
         background-color: #ccc;
         border: 1px solid #000;
      }
   </style>
</head>
<body>
   <h3>How to dynamically set the height and width of a div element using jQuery?</h3>

   <button onclick="setDimensionsAttr()">Set Dimensions Using the attr method</button>
   <button onclick="setDimensionsProp()">Set Dimensions Using height and width property</button>
   <button onclick="setDimensionsAnimate()">Set Dimensions Using animate method</button>
   <div id="myDiv">

   </div>
   <script>
      const divElement = $("#myDiv");

      function setDimensionsAttr() {
         // Example 1: Using the attr jQuery method
         divElement.attr('style', 'height: 200px; width: 300px;');
      }

      function setDimensionsProp() {
         // Example 2: Using height and width jQuery property
         divElement.height(100); // Set the height to 100 pixels
         divElement.width(200); // Set the width to 200 pixels
      }

      function setDimensionsAnimate() {
         // Example 3: Using animate jQuery method
         divElement.animate({ height: '300px', width: '400px' }, 'slow');
      }
   </script>
</body>
</html>