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

Question

你能告诉我如何在单击按钮时使用 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

Answer 1

它们都增加了高度的原因是因为您的 .abc class 没有设置高度。因此，当您增加内容 div 的高度时，您也会增加父级的高度，因此图像 div 也会增加。

您可以通过设置父元素的高度来解决这个问题

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

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

how to increase div height using javascript on button click?

html

javascript

css

css-grid