div隐藏与显示属性(实现div显示或隐藏的三种方法)

一、display属性

在网页布局中，div是一个非常常见的标签，在实际开发中经常需要通过display属性来控制div的显示和隐藏。display有多个参数可以选择：

div {
  display: none; /* 隐藏 */
}

上述代码可以将div元素设置为隐藏状态，也可以通过display:block或者display:inline-block等属性将其显示出来。

此外，display还有其他参数可以灵活运用，控制元素的显示形式和布局方式，如：flex, grid, table等。

二、visibility属性

visibility属性与display类似，也可以实现元素的隐藏和显示，但两种属性的隐藏方式有所不同。visibility的参数有visible和hidden

div {
  visibility: hidden; /* 隐藏 */
}

与display属性不同的是，visibility:hidden会占用原来div所在的位置，但其本身是不可见的，而display:none则不会占用位置。

三、opacity属性

opacity属性可以控制元素的透明度，从而实现元素的隐藏和显示效果，常见的参数有0~1，0表示完全透明，1表示完全不透明。

div {
  opacity: 0; /* 隐藏 */
}

需要注意的是，通过opacity来实现元素的隐藏和显示时，隐藏的元素会占用原来的位置。

四、jQuery的show和hide方法

在实际开发中，我们经常使用JavaScript库jQuery来控制元素的显示和隐藏。jQuery提供了show和hide方法，可以方便地实现隐藏和显示的效果。

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(); /* 隐藏 */
  });
  $("#show").click(function(){
    $("p").show(); /* 显示 */
  });
});

上述代码中，点击id为hide的元素时，所有p元素会隐藏，点击id为show的元素时，所有p元素会重新显示。

五、CSS3的transition属性

CSS3提供了transition属性来实现元素的隐藏和显示效果，可以让元素在一定的时间内逐渐地过渡，从而实现更加平滑的效果。

div {
  transition: opacity 2s ease-in-out; /* 过渡 */
  opacity: 0; /* 隐藏 */
}
div:hover {
  opacity: 1; /* 显示 */
}

上述代码中，div元素初始状态下进行了opacity的设置，通过hover来控制透明度的变化，实现平滑的过渡效果。

六、总结

以上分别介绍了display属性、visibility属性、opacity属性、jQuery的show和hide方法、CSS3的transition属性，它们各有特点，在不同的场合可以采用不同的方式来实现元素的隐藏和显示效果。