控制元素的可见性：使用 CSS

CSS 的 `visibility` 属性用于指定元素在文档中是否可见。即使元素已渲染，如果 CSS `visibility` 属性设置为 `hidden`，它也不会显示。

以下是用于控制元素可见性的 CSS `visibility` 值：

序号 值与描述
1 visible
默认值，元素及其子元素可见。
2 hidden
隐藏元素及其子元素，但元素仍然被渲染并在页面上占据相应的空间。
3 collapse
仅用于表格行（<tr>）、行组（<tbody>）、列（<col>）和列组（<colgroup>）。此值将删除一行或一列，该行或列占据的空间将可用于其他内容。如果用于其他元素，则其渲染效果与 `hidden` 相同。
4 initial
将元素的可见性设置为其默认值。
5 inherit
指定 `visibility` 属性的值应从父元素继承。

显示元素

CSS `visibility: visible` 属性用于显示元素。这里，我们显示标题 1：

h1 {
   visibility: visible;
}

示例

让我们来看一个在网页上显示元素的示例：

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         visibility: visible;
      }
      p {
         visibility: hidden;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is set hidden</p>
</body>
</html>

隐藏元素

CSS `visibility: hidden` 用于隐藏元素。让我们来看一个在网页上隐藏元素的示例：

示例

<!DOCTYPE html>
<html>
<head>
   <title>CSS Visibility hidden</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         margin:5px;
         box-sizing: border-box;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         display: inline-block;
         height: 40px;
         width: 40px;
         color: white;
         border: 4px solid black;
      }
      .child:nth-of-type(1){
         background-color: #FF8A00;
      }
      .child:nth-of-type(2){
         background-color: #F44336;
      }
      .child:nth-of-type(3){
         background-color: #C303C3;
      }
      .child:nth-of-type(4){
         background-color: #4CAF50;
      }
      .child:nth-of-type(5){
         background-color: #03A9F4;
      }
      .child:nth-of-type(6){
         background-color: #FEDC11;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Visibility-hidden</legend>
         <div id="container">
            <div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
         </div><br>
         <input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
      </fieldset>
   </form>
   <script>
      var primaryColor = document.getElementsByClassName('primary');
      function visibilityHidden(){
         for(var i=0; i<3; i++)
         primaryColor[i].style.visibility = 'hidden';
      }
   </script>
</body>
</html>

表格中的可见性

让我们来看一个使用值为 `collapse` 的 CSS `visibility` 属性的示例。它仅用于表格行（<tr>）、行组（<tbody>）、列（<col>）和列组（<colgroup>）。此值将删除一行或一列，该行或列占据的空间将可用于其他内容。如果用于其他元素，则其渲染效果与 `hidden` 相同。

示例

让我们来看一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>CSS Visibility collapse</title>
   <style>
      form ,table{
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      table, th, td {
         border-collapse: collapse;
         border: 1px solid black;
      }	
      thead {
         background-color: goldenrod;
      }
      tbody{
         background-color: khaki;
      }
      tr:nth-of-type(3){
         visibility: collapse;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Visibility-collapse</legend>
         <table>
            <thead>
               <tr><th>Name</th><th>Course</th></tr>
            </thead>
            <tbody>
               <tr><td>Joana</td><td>MBA</td></tr>
               <tr><td>Smith</td><td>B.Arc</td></tr>
               <tr><td>Xersus</td><td>M.Sc</td></tr>
            </tbody>
         </table>
      </fieldset>
   </form>
</body>
</html>

更新于：2023年10月30日

430 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告