[分享]css动态隐藏div的高度

CSS中有一个常用的属性叫做display，可以控制元素的显示与隐藏。如果我们想要让一个div在初始状态下不显示出来，而是通过点击按钮来显示，该怎么实现呢？比较常用的方法是通过JavaScript来控...

CSS中有一个常用的属性叫做display，可以控制元素的显示与隐藏。如果我们想要让一个div在初始状态下不显示出来，而是通过点击按钮来显示，该怎么实现呢？

比较常用的方法是通过JavaScript来控制元素的display属性。但是，我们也可以使用纯CSS来实现这样的效果，而且更加简洁。具体方法是通过将div的高度设为0，并将overflow属性设为hidden，来达到隐藏div的效果。代码如下：

.hide {
  height: 0;
  overflow: hidden;
} 

然后我们为控制按钮添加一个点击事件，通过添加或移除hide类来控制div的显示或隐藏。代码如下：

var button = document.querySelector('button');
var div = document.querySelector('div');
button.addEventListener('click', function() {
  div.classList.toggle('hide');
}); 

当我们点击按钮时，就会在div上添加或移除hide类。如果div有hide类，那么它的高度就会被设为0，从而隐藏起来。