Como aumentar o tamanho de uma divisão ao clicar nela usando jQuery?

Neste artigo, aprenderemos como aumentar o tamanho de uma divisão ao clicar nela usando jQuery.

Abordagem 1: usando o método height() e width().

Todas as divisões na página são primeiro selecionadas usando um seletor comum e uma ligação de clique é aplicada para acionar a função para aumentar o tamanho usando o método click() . A divisão clicada no momento pode ser encontrada usando -o como seletor.

A altura atual do elemento pode ser encontrada usando o método height() e a largura atual pode ser encontrada usando o método width() . Eles são armazenados temporariamente em variáveis separadas. Os mesmos métodos são usados para definir a altura e largura modificadas. Os novos valores podem ser calculados multiplicando a altura e largura atuais por um multiplicador. Este multiplicador pode ser especificado como uma variável. Isso aumentará o tamanho da divisão clicada igualmente.

Também podemos usar diferentes multiplicadores para aumentar a altura e a largura das divisões separadamente.

Sintaxe:

$(".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);
});

Os exemplos abaixo ilustram a abordagem acima:

Exemplo:

<html>
<head>
  <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <style>
    .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;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    How to increase the size of a 
    division when you click it using jQuery?
  </b>
    
<p>Click on a div to increase its size</p>
  
  
  <div class="container">
    <div class="box red-bg"></div>
    <div class="box green-bg"></div>
    <div class="box yellow-bg"></div>
  </div>
  
  <script>
    $(".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
      );
    });
  </script>
</body>
</html>

Saída:

Abordagem 2: usando o método css() .

Isso é semelhante à abordagem acima. Todas as divisões na página são primeiro selecionadas usando um seletor comum e uma ligação de clique é aplicada para acionar a função para aumentar o tamanho usando o método click() . A divisão clicada no momento pode ser encontrada usando -o como seletor.

A altura e largura atuais do elemento podem ser encontradas usando o método css() e passando o primeiro parâmetro como “altura” e “largura “. Isso retornará a altura e largura atuais da divisão. Eles são armazenados temporariamente em variáveis separadas após serem analisados em um inteiro usando o método parseInt() . O método css() é novamente usado para atribuir a nova altura e largura ignorando o novo valor como o segundo parâmetro. Os novos valores podem ser calculados multiplicando a altura e largura atuais por um multiplicador, semelhante ao método acima.

Sintaxe:

$(".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,
  });
});

Exemplo:

<html>
<head>
  <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
  </script>
  <style>
    .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;
    }
  </style>
</head>
  
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    How to increase the size of a 
    division when you click it using jQuery?
  </b>
  <p>Click on a div to increase its size</p>
  
  
  <div class="container">
    <div class="box blue-bg"></div>
    <div class="box green-bg"></div>
    <div class="box orange-bg"></div>
  </div>
  
  <script>
    $(".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,
      });
    });
  </script>
</body>
</html>

Saída:

Acervo Lima

O maior acervo de tutoriais e referências

Como aumentar o tamanho de uma divisão ao clicar nela usando jQuery?

Latest posts

Latest posts

Most popular posts