HTML Div Hidden|极客教程

HTML Div Hidden

在网页开发中，我们经常会使用<div>元素来对页面进行布局和排版。有时候，我们希望在页面中隐藏某个<div>元素，但又不希望完全移除它。这时候，就可以通过CSS的display属性来控制<div>元素的显示与隐藏。

1. 隐藏`<div>`元素

要隐藏一个<div>元素，可以通过设置display: none;来实现。这样该元素就不会在页面上显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hidden Div</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

<div class="hidden">
  This is a hidden div on how2html.com.
</div>

</body>
</html>

上面的示例代码中，.hidden类被设置为display: none;，所以页面上的这个<div>元素在加载时就会被隐藏起来。

2. 显示隐藏的`<div>`元素

虽然隐藏了<div>元素，但是我们可以通过JavaScript来动态地显示它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Show Hidden Div</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

<button onclick="showDiv()">Show Hidden Div</button>

<div class="hidden" id="hiddenDiv">
  This is a hidden div on how2html.com.
</div>

<script>
  function showDiv() {
    document.getElementById("hiddenDiv").style.display = "block";
  }
</script>

</body>
</html>

Output:

HTML Div Hidden

在这个示例中，当点击按钮时，通过JavaScript的document.getElementById("hiddenDiv").style.display = "block";语句将隐藏的<div>元素显示出来。

3. 使用visibility属性隐藏元素

除了display属性之外，还可以使用visibility属性来隐藏元素。visibility: hidden;会隐藏元素，但仍占据页面布局空间，不会改变页面的布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visibility Hidden</title>
  <style>
    .hidden {
      visibility: hidden;
    }
  </style>
</head>
<body>

<div class="hidden">
  This is a div with visibility hidden on how2html.com.
</div>

</body>
</html>

Output:

HTML Div Hidden

在这个示例中，.hidden类使用visibility: hidden;来隐藏元素，和display: none;相比，这种方式可以保留元素原本的空间。

4. 使用JavaScript控制visibility属性

可以使用JavaScript来动态地控制visibility属性，使元素在页面中的显示与隐藏可以根据条件来控制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Control Visibility with JS</title>
  <style>
    .hidden {
      visibility: hidden;
    }
  </style>
</head>
<body>

<button onclick="toggleVisibility()">Toggle Visibility</button>

<div class="hidden" id="toggleDiv">
  This is a div with toggled visibility on how2html.com.
</div>

<script>
  let divVisible = false;

  function toggleVisibility() {
    const div = document.getElementById("toggleDiv");

    if (divVisible) {
      div.style.visibility = "hidden";
      divVisible = false;
    } else {
      div.style.visibility = "visible";
      divVisible = true;
    }
  }
</script>

</body>
</html>

Output:

HTML Div Hidden

通过上面的示例，可以看到当点击按钮时，可以通过JavaScript动态地控制visibility属性，使元素的显示与隐藏进行切换。

5. 使用opacity属性实现渐变显示隐藏

除了使用display和visibility属性来控制元素的显示与隐藏之外，还可以使用opacity属性来为元素设置透明度。通过逐渐调整透明度值，可以实现元素渐显和渐隐的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Opacity Fade</title>
  <style>
    .fade-in {
      opacity: 0;
      transition: opacity 1s;
    }
    .fade-in.show {
      opacity: 1;
    }
  </style>
</head>
<body>

<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>

<div class="fade-in" id="fadeDiv">
  This is a div with opacity fade on how2html.com.
</div>

<script>
  function fadeIn() {
    const fadeDiv = document.getElementById("fadeDiv");
    fadeDiv.classList.add("show");
  }

  function fadeOut() {
    const fadeDiv = document.getElementById("fadeDiv");
    fadeDiv.classList.remove("show");
  }
</script>

</body>
</html>

Output:

HTML Div Hidden