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

jqueryweb developmentfront end technology

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

在 Web 开发中，经常需要根据特定条件或用户交互动态调整 <div> 元素的高度和宽度。我们可以使用流行的 JavaScript 库 jQuery 轻松实现这一点。

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

示例 1

在本例中，我们将使用 jQuery 的 height() 和 width() 方法，在文档挂载和渲染时动态设置 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); // 将高度设置为 200 像素
            divElement.width(300); // 将宽度设置为 300 像素
         });
      </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() {
         // 示例 1:使用 attr jQuery 方法
         divElement.attr('style', 'height: 200px; width: 300px;');
      }

      function setDimensionsProp() {
         // 示例 2:使用高度和宽度 jQuery 属性
        divElement.height(100); // 将高度设置为 100 像素
        divElement.width(200); // 将宽度设置为 200 像素
      }

      function setDimensionsAnimate() {
         // 示例 3:使用 animate jQuery 方法
         divElement.animate({ height: '300px', width: '400px' }, 'slow');
      }
   </script>
</body>
</html>