使用 jQuery 单击时如何增加分区的大小？

在本文中，我们将学习如何在您使用 jQuery 单击分区时增加分区的大小。

方法一：使用height()和width()方法。

首先使用公共选择器选择页面上的所有分区，并应用点击绑定以触发使用click()方法增加大小的函数。然后可以通过将其用作选择器来找到当前单击的分区。

元素的当前高度可以使用height()方法找到，当前宽度可以使用width()方法找到。这些临时存储在单独的变量中。然后使用相同的方法设置修改后的高度和宽度。可以通过将当前高度和宽度乘以乘数来计算新值。这个乘数可以指定为一个变量。这将同样增加点击分区的大小。

我们还可以使用不同的乘数来分别增加分区的高度和宽度。

句法：

$(".box").click(function () {

  // Select the clicked element
  let curr_elem = $(this);

  // Get the current dimensions
  let curr_width = curr_elem.width();
  let curr_height = curr_elem.height();

  // Set the new dimensions
  curr_elem.height(curr_height * increase_modifier);
  curr_elem.width(curr_width * increase_modifier);
});

以下示例说明了上述方法：

例子：

HTML

  
  
  
    .container {
      display: flex;
    }
  
    .box {
      height: 100px;
      width: 100px;
      margin: 10px;
    }
  
    .red-bg {
      background-color: red;
    }
  
    .green-bg {
      background-color: green;
    }
  
    .yellow-bg {
      background-color: yellow;
    }
  


  
    GeeksforGeeks
  
  
    How to increase the size of a 
    division when you click it using jQuery?
  
    
Click on a div to increase its size
  
  
  
    
    
    
  
  
  
    $(".box").click(function () {
  
      // Select the element that
      // is clicked on
      let curr_elem = $(this);
  
      // Set the amount to increase
      let increase_modifier = 1.5;
  
      // Get the current width of the element
      let curr_width = curr_elem.width();
  
      // Get the current height of the element
      let curr_height = curr_elem.height();
  
      // Use the same methods to set
      // the new dimensions
      curr_elem.height(
        curr_height * increase_modifier
      );
      curr_elem.width(
        curr_width * increase_modifier
      );
    });
  

输出：

方法 2：使用 css() 方法。

这类似于上面的方法。首先使用公共选择器选择页面上的所有分区，并应用点击绑定以触发使用click()方法增加大小的函数。然后可以通过将其用作选择器来找到当前单击的分区。

通过使用css()方法并将第一个参数作为“height”和“width ”传递，可以找到元素的当前高度和宽度。这将返回分区的当前高度和宽度。在使用parseInt()方法将它们解析为整数后，这些将临时存储在单独的变量中。 css()方法再次用于分配新的高度和宽度，绕过作为第二个参数的新值。可以通过将当前高度和宽度乘以乘数来计算新值，类似于上述方法。

句法：

$(".box").click(function () {

  // Select the clicked element
  let curr_elem = $(this);

  // Get the current dimensions
  let curr_width = parseInt(curr_elem.css("width"), 10);
  let curr_height = parseInt(curr_elem.css("height"), 10);

  // Set the CSS value of the element
  curr_elem.css({

    // Set the new height and width
    width: curr_width * increase_modifier,
    height: curr_height * increase_modifier,
  });
});

例子：

HTML

  
  
  
    .container {
      display: flex;
    }
  
    .box {
      height: 100px;
      width: 100px;
      margin: 10px;
    }
  
    .blue-bg {
      background-color: blue;
    }
  
    .green-bg {
      background-color: green;
    }
  
    .orange-bg {
      background-color: orange;
    }
  

  

  
    GeeksforGeeks
  
  
    How to increase the size of a 
    division when you click it using jQuery?
  
  Click on a div to increase its size
  
  
  
    
    
    
  
  
  
    $(".box").click(function () {
  
      // Select the element that
      // is clicked on
      let curr_elem = $(this);
  
      // Set the amount to increase
      let increase_modifier = 1.5;
  
      // Get the current width of the element
      // and parse the value to integer
      let curr_width = 
          parseInt(curr_elem.css("width"), 10);
  
      // Get the current height of the element
      // and parse the value to integer
      let curr_height = 
          parseInt(curr_elem.css("height"), 10);
  
      // Set the CSS value of the element
      curr_elem.css({
  
        // Set the new height and width
        // after multiplying
        width: curr_width * increase_modifier,
        height: curr_height * increase_modifier,
      });
    });
  

输出：