控制元素的可見性：使用 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 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告