Question

使用JavaScript，我希望通过更改CSS来显示或隐藏div。

HTML：

<div id="bottomContainer">
    <div id="count" class="count">...</div>
    <div id="visualizations>...</div>
</div>

CSS：

.bottomContainer {
    display: block;
}

我想使用javascript执行以下操作

[按钮]

单击按钮时，Javascript会将bottomContainer的CSS更改为以下

.bottomContainer {
     display: none;
}

这可能吗？

Answer 1

是的，有很多方法。使用vanilla JS，您可以执行以下操作：

document.getElementById('myButtonId').addEventListener('click', function () {
    document.getElementById('bottomContainer').style.display = "none";
}

这只是其中一种方式。您还可以为具有.hide规则的display: none类创建css规则，或者使用jQuery的.hide()方法或任意数量的基于框架的方法执行此操作。

Answer 2

如果您只希望按钮隐藏容器而不切换其可见性，则此功能将起作用。

<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>

使用Javascript我想要一个按钮来显示或隐藏div通过更改CSS

2 个答案: