css点击按钮设置div

CSS是一种用于网页排版和样式设计的语言，在Web开发中非常重要。其中，通过点击按钮设置DIV是一种Web开发常用的技巧，在此给大家分享一下如何使用CSS实现这一功能。

.button {
  
  background-color: #4CAF50;
 /* 设置按钮背景颜色 */
  
  border: none;
 /* 取消按钮边框 */
  
  color: white;
 /* 按钮文字颜色 */
  
  padding: 15px 32px;
 /* 按钮内边距 */
  
  text-align: center;
 /* 按钮文字居中 */
  
  text-decoration: none;
 /* 取消文字下划线 */
  
  display: inline-block;
 /* 设置为块级元素 */
  
  font-size: 16px;
 /* 按钮字体大小 */
  
  margin: 4px 2px;
 /* 按钮外边距 */
  
  cursor: pointer;
 /* 鼠标悬停效果 */
}
.show {
  
  display: block;
 /* 显示DIV */
}
.hide {
  
  display: none;
 /* 隐藏DIV */
}
 

上面是CSS的代码，我们可以看到有两个类名：.show和.hide。这两个类名的作用是根据按钮的点击来控制DIV的显示或隐藏。接下来是HTML代码：

<button class="button" onclick="myFunction()">点击我</button>
<div id="myDIV" class="hide">我是要显示的内容</div> 

这里可以注意到，我们通过JavaScript代码来控制Button的点击事件，然后来切换DIV的类名。具体的JavaScript代码如下：

function myFunction() {
  
  var x = document.getElementById("myDIV");
  
  if (x.className === "hide") {
  
   
   x.className = "show";
  
}
 else {
  
   
   x.className = "hide";
  
}
}
 

最后，通过CSS代码中的.show和.hide两个类名，来实现DIV的显示或隐藏。相信通过这个实例，大家都能够掌握如何使用CSS点击按钮设置DIV的技巧了。