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

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

在 Web 开发中，经常会遇到需要根据某些条件或用户交互动态调整 <div> 元素的高度和宽度的场景。我们可以使用流行的 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

在本例中，我们将遵循上述代码模式，并使用三种不同的方法更改 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>

结论

总之，使用 jQuery 动态设置 <div> 元素的高度和宽度提供了一种灵活且有效的方法来根据特定条件或用户交互调整尺寸。借助以上示例，我们学习了如何使用 height() 和 width()、attr() 以及 animate() jQuery 方法动态设置 HTML 元素的高度和宽度。

更新于： 2023年8月3日

534 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告