js 实现 显示隐藏功能

1. 首先我们得实现html 样式

  <button class="btn">切换</button>
  <div id ='box' class="cba" title="aaa" style="color: coral;"> 我u我问问</div>

2. 在js 中获取dom 元素

// 1.获取元素
var btn=document.querySelector('.btn')
var box1=document.querySelector('#box')

3. 监听按钮的点击事件

4. 方案1

if(box1.hidden===true){
    box1.hidden=false
}else{
    box1.hidden=true 
}

5. 方案2:

btn.onclick=function(){
box1.hidden=!box1.hidden
}

6. 方案3:

btn.onclick=function(){
//将原来的属性box盒子切换
box.hidden=true

}

7. 效果如下：