js点击块之后改变块的大小

基础概念

在JavaScript中，通过监听元素的点击事件，可以触发相应的函数来改变元素的大小。这通常涉及到修改元素的CSS样式，如宽度和高度。

类型

固定增量：每次点击增加或减少固定的像素值。
百分比变化：根据当前大小的百分比来调整大小。
动画效果：结合CSS过渡或动画库，使大小变化更加平滑。

应用场景

可缩放的面板：用户可以根据需要调整面板大小。
交互式图表：点击放大或缩小图表以查看细节。
游戏界面：在游戏中调整元素大小以适应不同的游戏状态。

示例代码

以下是一个简单的示例，展示如何在点击块之后改变其大小：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Size on Click</title>
<style>
  #resizableBlock {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<div id="resizableBlock"></div>

<script>
  const block = document.getElementById('resizableBlock');
  let isIncreasing = true;

  block.addEventListener('click', function() {
    if (isIncreasing) {
      block.style.width = (parseInt(block.style.width) + 10) + 'px';
      block.style.height = (parseInt(block.style.height) + 10) + 'px';
      if (parseInt(block.style.width) >= 200) {
        isIncreasing = false;
      }
    } else {
      block.style.width = (parseInt(block.style.width) - 10) + 'px';
      block.style.height = (parseInt(block.style.height) - 10) + 'px';
      if (parseInt(block.style.width) <= 100) {
        isIncreasing = true;
      }
    }
  });
</script>

</body>
</html>