[分享]css中div隐藏与显示

CSS中的div隐藏与显示是Web开发中非常常见的功能之一。通过CSS的display属性，我们可以控制一个元素的显示与隐藏，同时也可以改变元素的显示方式。/ 隐藏元素 / div { display...

CSS中的div隐藏与显示是Web开发中非常常见的功能之一。通过CSS的display属性，我们可以控制一个元素的显示与隐藏，同时也可以改变元素的显示方式。

/* 隐藏元素 */
div {
  display: none;
}
/* 显示元素 */
div {
  display: block;
} 

上面的代码中，display:none可以将元素隐藏起来，使其不占据页面空间，而display:block则可以将隐藏元素重新显示，并让它以块级元素的形式显示。

除了上面的block，还有inline、inline-block、flex等不同的显示方式，它们具体的效果和使用方式可以参考CSS相关教程。

在实际开发中，我们通常会结合JavaScript来控制元素的显示与隐藏。下面是一段基本的JavaScript代码，可以通过点击按钮来实现隐藏和显示div元素：

var btn = document.querySelector('button');
var div = document.querySelector('div');

btn.addEventListener('click', function() {
   if (div.style.display === 'none') {
      div.style.display = 'block';
   } else {
      div.style.display = 'none';
   }
}); 

上面的代码中，我们首先获取了一个按钮和一个div元素，然后添加了一个点击事件监听器。当按钮被点击时，代码会检查div元素的display属性是否为none，如果是，则将其改为block，如果不是，则将其改为none。

通过上述方式，我们可以方便地控制一个元素的显示和隐藏，使页面更加美观和易于操作。