如何在按钮单击时使用 javascript 增加 div 高度？答案

【问题标题】：how to increase div height using javascript on button click?如何在按钮单击时使用 javascript 增加 div 高度？
【发布时间】：2021-09-03 07:21:50
【问题描述】：

您能告诉我如何在单击按钮时使用 javascript 增加 div 高度吗？

我有两个 div（一个是黄色 background-color，另一个是白色 background-color）。

点击按钮我想增加white框的高度。 但是当我点击按钮时，它会增加黄色和白色框的高度？

为什么当我点击按钮时黄色 div 会增加它的高度..我希望在点击按钮后它的高度保持不变

这是我的代码

function abc() {
  document.querySelector(".content").style.height = "300px";
}

.abc {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(10, [col-start] 1fr);
  grid-template-rows: repeat(8, [row-start] 1fr);
  padding-top: 3.4em;
  padding-bottom: 3.4em;
}
.img {
  grid-column: col-start / span 8;
  grid-row: row-start / span 6;
  background-size: cover;
  max-width: 1074px;
  background-color: #ee0;
}
.content {
  grid-column: col-start 6 / span 6;
  grid-row: row-start 2 / span 6;
  background: #fff;
  min-height: 100px;
  border: 1px solid blue;
  padding: 3em;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="parent">
      <div class="abc">
        <div class="img"></div>
        <div class="content"></div>
      </div>
    </div>

    <button onclick="abc()">click</button>
  </body>
</html>

https://codesandbox.io/s/still-lake-lw07u?file=/index.html:0-1282

【问题讨论】：

那你想让按钮同时增加或者只是白色或黄色不明白你到底想要什么
我只想要white box 增加它的高度而不是黄色的
增加一个 div 的高度时，父 div 的整体可用高度也会增加。由于没有为“黄色 div”设置最大高度，它也会扩展。您可以为 div 设置 max-height 以防止其扩展
最大高度例如codesandbox.io/s/sleepy-joana-9wspz?file=/index.html

标签： javascript html css css-grid

【解决方案1】：

它们的高度都增加的原因是因为您的 .abc 类没有设定高度。因此，当您增加内容 div 的高度时，您也增加了父级的高度，因此也增加了 Image div。

您可以通过将高度设置为父元素来解决此问题

      .abc {
        ...
        height: 200px; 
      }

【讨论】：