JavaScriptを使用するCSSを変更してdivを表示または非表示にする

Question

JavaScriptを使用して、CSSを変更してdivを表示または非表示にします。

HTML：

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

はCSS：

.bottomContainer { 
    display: block; 
} 

私は、次の

[ボタン]

ボタンをクリックするとJavascriptがCSSに変更を行うためにはJavaScriptを使用したいですbottomContainerの場合は次のようになります

.bottomContainer { 
    display: none; 
} 

これは可能ですか？

Answer 1

はい、さまざまな方法があります。 vanilla JSでは、次のようなことを行います：

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

これはほんの数例の1つです。また、.hideクラスのCSSルールをdisplay: noneルールにするか、jQueryの.hide()メソッド、または任意の数のフレームワークベースの方法で行うことができます。

Answer 2

ボタンがコンテナを非表示にし、表示を切り替えないようにする場合にのみ有効です。

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