HTML 쇼 숨기기

HTML Hide and Show

HTML 코드에서는 때로는 특정 요소를 숨기고 표시해야 할 때가 있습니다. 이 기사에서는 HTML에서 요소를 숨기고 표시하는 여러 가지 방법에 대해 설명합니다.

1. 표시 속성 사용

표시 속성은 요소의 표시 모드를 지정하는 데 사용됩니다. 여기에는 다음과 같은 선택적 값이 있습니다.

• none: 요소가 표시되지 않으며 공간을 차지하지 않습니다.
• block: 요소는 앞뒤에 줄 바꿈을 사용하여 블록 수준으로 표시됩니다.
• inline: 요소는 앞뒤에 줄 바꿈 없이 인라인으로 표시됩니다.
• inline-block: 요소는 인라인 블록 수준에서 표시되며 앞뒤에 줄 바꿈이 없지만 너비 및 높이와 같은 속성을 설정할 수 있습니다.

display 속성을 설정하면 요소를 숨기고 표시할 수 있습니다.

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

위 코드에서는 먼저 style 속성을 통해 div 요소의 표시 속성을 없음으로 설정, 즉 요소를 숨깁니다. 그런 다음 두 버튼 요소의 onclick 이벤트와 JavaScript를 통해 버튼 클릭 동작을 구현하여 요소의 표시 상태를 변경합니다.

2. 가시성 속성 사용

가시성 속성은 요소의 가시성을 지정하는 데 사용됩니다. 여기에는 다음과 같은 선택적 값이 있습니다.

• visible: 요소가 표시됩니다.
• hidden: 요소는 보이지 않지만 여전히 공간을 차지합니다.

visibility 속성을 설정하면 요소를 숨기고 표시할 수 있습니다.

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

위 코드에서는 먼저 style 속성을 통해 div 요소의 visible 속성을 숨김, 즉 요소를 숨기도록 설정했습니다. 그런 다음 두 버튼 요소의 onclick 이벤트와 JavaScript를 통해 버튼 클릭 동작을 구현하여 요소의 표시 상태를 변경합니다.

3. 불투명 속성을 사용하세요

불투명 속성은 요소의 투명도를 지정하는 데 사용됩니다. 값 범위는 0~1이며, 0은 완전히 투명함을 의미하고 1은 불투명함을 의미합니다. 불투명도 속성을 설정하면 요소의 페이드 아웃 및 페이드 아웃 효과를 얻을 수 있습니다.

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

위 코드에서는 불투명도 속성을 설정하여 div 요소의 페이드 아웃 및 페이드 아웃 효과를 얻습니다. div 요소의 전환 속성입니다. 버튼 클릭 시 JavaScript를 통해 div 요소의 opacity 속성을 해당 값(0 또는 1)으로 설정한 후 해당 시간으로 전환 속성을 설정하여 페이드 아웃 및 페이드 아웃 효과를 얻을 수 있습니다.

요약

위의 세 가지 방법은 모두 HTML 요소의 숨기기 및 표시 효과를 얻을 수 있지만 상황에 따라 사용 효과가 다를 수 있습니다. 특정 요구 사항과 시나리오에 따라 적절한 방법을 선택해야 합니다.

위 내용은 HTML 쇼 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!