要素をマスクする方法

要素を非表示にする方法は多数あり、CSS の表示プロパティ、可視性プロパティ、不透明度プロパティを使用したり、CSS クラスを追加および削除したりすることができます。以下は具体的なコード例です:

1. 表示属性を使用して要素を非表示にします:

   <style>
     .hidden {
       display: none;
     }
   </style>
   <div class="hidden">这是要隐藏的元素</div>

   ログイン後にコピー

   この例では、要素の CSS クラスを hidden に設定することで、次を使用します。 display: none; 要素を非表示にします。

2. visibility 属性を使用して要素を非表示にする:

   <style>
     .hidden {
       visibility: hidden;
     }
   </style>
   <div class="hidden">这是要隐藏的元素</div>

   ログイン後にコピー

   この例では、visibility: hidden; を使用して、CSS クラスを hidden に設定することで要素を非表示にします。 display: none; とは異なり、visibility: hidden; を使用すると要素が非表示になるだけですが、依然としてページ レイアウト スペースを占有します。

3. 不透明度属性を使用して要素を非表示にする:

   <style>
     .hidden {
       opacity: 0;
     }
   </style>
   <div class="hidden">这是要隐藏的元素</div>

   ログイン後にコピー

   この例では、不透明度: 0; を使用して、CSS クラスを非表示に設定することで要素を非表示にします。このメソッドは要素を完全に透明にしますが、ページ レイアウトにはまだ存在します。

4. CSS クラスの追加と削除を使用して要素を非表示にする:

   <style>
     .hidden {
       display: none;
     }
   </style>
   <div id="myElement">这是要隐藏的元素</div>
   
   <script>
     var element = document.getElementById("myElement");
     function hideElement() {
       element.classList.add("hidden");
     }
     function showElement() {
       element.classList.remove("hidden");
     }
   </script>
   
   <button onclick="hideElement()">隐藏元素</button>
   <button onclick="showElement()">显示元素</button>

   ログイン後にコピー

   この例では、指定された CSS クラスが、JavaScript の classList 属性を通じて非表示にする要素に追加されます。隠れた効果を実現する要素。 CSS クラスを追加または削除することで、要素の表示と非表示を制御できます。

つまり、要素の非表示は、CSS の display プロパティ、visibility プロパティ、opacity プロパティを通じて実現できます。また、CSS クラスを追加および削除することによって、要素の表示と非表示を制御することもできます。 。どの方法を使用するかは、特定のニーズと効果によって異なります。

以上が要素をマスクする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。