你能告诉我如何在按钮点击时使用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
它们都在高度增加的原因是因为您的.abc类没有设置高度。所以当你增加内容div的高度时你同时也增加了父div的高度，因此也增加了图像div的高度。
你可以通过设置父元素
的高度来解决这个问题.abc {
...
height: 200px;
}