按钮点击设置div高度_点击按钮显示div

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

按钮点击设置div高度，可以通过JavaScript来实现。我们需要获取到按钮和要设置高度的div元素。然后，我们给按钮绑定一个点击事件，在点击事件中设置div的高度。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>按钮点击设置div高度</title>
  <style>
    .my-div {
      background-color: #f0f0f0;
      width: 200px;
      height: 100px;
      transition: height 0.5s;
    }
  </style>
</head>
<body>
  <button id="my-button">点击设置div高度</button>
  <div id="my-div" class="6392-9d9c-6df8-2e89 my-div"></div>
  <script>
    var button = document.getElementById('my-button');
    var div = document.getElementById('my-div');
    button.addEventListener('click', function() {
      div.style.height = '200px';
    });
  </script>
</body>
</html>

在上面的示例代码中，我们首先给按钮和div分别添加了id属性，以便通过JavaScript获取到它们。然后，我们使用getElementById方法分别获取到按钮和div元素，并将它们分别赋值给button和div变量。

接下来，我们使用addEventListener方法给按钮绑定了一个点击事件。当按钮被点击时，会执行事件处理函数。在事件处理函数中，我们通过修改div的style属性，将其高度设置为200px。

需要注意的是，我们在div的样式中添加了transition属性，用于控制高度的过渡效果。这样，在div高度改变时，会有一个平滑的过渡效果。

除了直接设置div的高度，我们还可以通过计算的方式来设置高度。例如，我们可以根据页面的实际高度来动态设置div的高度。示例代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>按钮点击设置div高度</title>
  <style>
    .my-div {
      background-color: #f0f0f0;
      width: 200px;
      height: 100px;
      transition: height 0.5s;
    }
  </style>
</head>
<body>
  <button id="my-button">点击设置div高度</button>
  <div id="my-div" class="6df8-2e89-92e0-17a5 my-div"></div>
  <script>
    var button = document.getElementById('my-button');
    var div = document.getElementById('my-div');
    button.addEventListener('click', function() {
      var windowHeight = window.innerHeight;
      div.style.height = windowHeight + 'px';
    });
  </script>
</body>
</html>

在上面的示例代码中，我们使用window.innerHeight属性获取到当前窗口的高度，并将其赋值给windowHeight变量。然后，我们将windowHeight与'px'拼接起来，作为div的高度值。这样，无论窗口的高度如何变化，div的高度都会自动适应。

除了直接设置div的高度，我们还可以使用CSS的类来控制div的高度。例如，我们可以定义多个类，每个类对应不同的高度值，然后通过添加或移除类来改变div的高度。示例代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>按钮点击设置div高度</title>
  <style>
    .my-div {
      background-color: #f0f0f0;
      width: 200px;
      height: 100px;
      transition: height 0.5s;
    }
    .tall {
      height: 200px;
    }
    .short {
      height: 50px;
    }
  </style>
</head>
<body>
  <button id="my-button">点击设置div高度</button>
  <div id="my-div" class="92e0-17a5-c0b2-c577 my-div"></div>
  <script>
    var button = document.getElementById('my-button');
    var div = document.getElementById('my-div');
    button.addEventListener('click', function() {
      if (div.classList.contains('tall')) {
        div.classList.remove('tall');
        div.classList.add('short');
      } else {
        div.classList.remove('short');
        div.classList.add('tall');
      }
    });
  </script>
</body>
</html>

在上面的示例代码中，我们定义了两个类：.tall和.short。.tall类对应的高度为200px，.short类对应的高度为50px。初始时，我们给div添加了.my-div和.short两个类，使其高度为50px。

在按钮的点击事件处理函数中，我们使用classList属性来操作div的类。如果div已经包含.tall类，我们就移除.tall类，并添加.short类；如果div不包含.tall类，我们就移除.short类，并添加.tall类。这样，每次点击按钮，div的高度都会在50px和200px之间切换。

通过以上示例代码，我们可以看到，通过按钮点击设置div高度的方法有多种实现方式。我们可以根据实际需求选择合适的方式来设置div的高度。

按钮点击设置div高度_点击按钮显示div

相关阅读