css点击按钮显示隐藏

CSS的显示隐藏操作在Web开发中非常常见，可以通过点击按钮来控制一些元素的显示与隐藏。接下来，我们将通过一个简单的例子来演示如何实现这一操作。

HTML代码：
<button id="btn">显示/隐藏</button>
<div id="box">这里是要显示和隐藏的内容</div>
CSS代码：
#box {
  
  display: none;
}
 

首先，我们在HTML中创建一个按钮和一个带有ID为“box”的DIV元素，其中DIV元素默认为隐藏状态。接着，在CSS中使用display:none;属性将DIV元素隐藏。

JavaScript代码：
var btn = document.getElementById("btn");
btn.onclick = function() {
  
  var box = document.getElementById("box");
  
  if (box.style.display == "none") {
  
   
   box.style.display = "block";
  
}
 else {
  
   
   box.style.display = "none";
  
}
}
;
 

接下来，我们在JavaScript中获取按钮对象并绑定一个点击事件。当按钮被点击时，我们获取DIV元素的对象，然后通过判断DIV元素的display属性状态，来实现显示和隐藏的切换。

以上就是实现CSS点击按钮显示隐藏的例子。希望对大家有所帮助。