当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Using Javascript I want a button to show or hide a div by changing the css

问题描述:

This question already has an answer here:

  • toggle show/hide div with button?

    6 answers

网友答案:

Yes, a number of ways. With vanilla JS, you would do something like:

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

This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.

网友答案:

This will work if you only want the button to hide the container and not toggle its visibility.

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

Yes, you can do like this, and instead of altering its CSS property direct, you add, toggle or remove a class, which is the recommended approach.

document.querySelector('button').addEventListener('click', function(e){
  document.querySelector('#bottomContainer').classList.toggle('display-none');
})
.display-none {
  display: none;
}
<button>Click me to toggle</button>

<div id="bottomContainer">
  <div id="count" class="count">...</div>
  <div id="visualizations">...</div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: