요소를 마스크하는 방법

요소를 숨기는 방법에는 CSS 표시 속성, 가시성 속성 및 불투명도 속성을 사용하거나 CSS 클래스를 추가 및 제거할 수 있습니다. 구체적인 코드 예는 다음과 같습니다.

1. display 속성을 사용하여 요소 숨기기:

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

   이 예에서는 CSS 클래스를 숨김으로 설정하여 요소를 숨기려면 display: none을 사용합니다.

2. visibility 속성을 사용하여 요소 숨기기:

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

   이 예에서 visible: Hidden은 CSS 클래스를 숨김으로 설정하여 요소를 숨기는 데 사용됩니다. display: none;과 달리 visible: hide;를 사용하면 단순히 요소가 보이지 않게 되지만 여전히 페이지 레이아웃 공간을 차지합니다.

3. opacity 속성을 사용하여 요소 숨기기:

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

   이 예에서는 CSS 클래스를 숨김으로 설정하여 요소를 숨기려면 opacity: 0을 사용합니다. 이 방법은 요소를 완전히 투명하게 만들지만 여전히 페이지 레이아웃에 존재합니다.

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>

   이 예에서는 숨기기 효과를 얻기 위해 JavaScript의 classList 속성을 통해 숨길 요소에 지정된 CSS 클래스를 추가합니다. CSS 클래스를 추가하고 제거하여 요소의 표시 및 숨기기를 제어할 수 있습니다.

즉, CSS의 표시 속성, 가시성 속성 및 불투명도 속성을 통해 요소를 숨길 수 있으며, CSS 클래스를 추가하거나 제거하여 요소의 표시 및 숨기기를 제어할 수도 있습니다. 어떤 방법을 사용할지는 특정 요구와 효과에 따라 다릅니다.

위 내용은 요소를 마스크하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!