CSS 표시 숨기기 div

CSS는 웹 디자인에서 중요한 역할을 합니다. 웹 페이지를 아름답게 할 뿐만 아니라 사용자 상호 작용 효과도 얻을 수 있습니다. 이 문서에서는 CSS를 사용하여 div를 표시하고 숨기는 방법을 설명합니다.

1. div를 표시하고 숨기려면 표시 속성을 사용하세요.

표시 속성은 요소의 표시 모드를 지정하는 데 사용됩니다. 공통 값은 none과 block입니다. 그 중 none은 해당 요소를 숨긴다는 의미이고, block은 해당 요소를 블록 요소로 표시한다는 의미입니다. 따라서 display 속성을 제어하여 div를 표시하거나 숨길 수 있습니다.

1.1 div 숨기기

div를 숨기려면 표시 속성을 없음으로 설정하세요. 예는 다음과 같습니다.

<div id="myDiv" style="display:none;">这是要隐藏的div</div>

위 코드에서는 CSS에서 스타일을 지정하기 위해 div 태그에 id 속성을 추가했습니다. 동시에 div의 표시 속성을 없음으로 설정하여 숨겨집니다.

1.2 Div 표시

숨겨진 div를 표시하려면 표시 속성을 block 또는 기타 표시되는 값으로 설정하세요. 예는 다음과 같습니다.

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="display:none;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}
</script>

위 코드에서는 버튼을 추가하고 이에 onclick 이벤트를 바인딩했습니다. 사용자가 버튼을 클릭하면 showDiv() 함수가 호출되고 div의 표시 속성이 block으로 설정됩니다. 그것을 표시합니다.

2. 가시성 속성을 사용하여 div를 표시하고 숨깁니다.

가시성 속성은 요소의 가시성을 지정하는 데 사용됩니다. 그 중 Hidden은 요소를 숨기는 것을 의미하고, visible은 요소를 보이게 하는 것을 의미합니다. 따라서 가시성 속성을 제어하여 div를 표시하거나 숨길 수도 있습니다.

2.1 div 숨기기

div를 숨기려면 가시성 속성을 숨김으로 설정하세요. 예는 다음과 같습니다.

<div id="myDiv" style="visibility:hidden;">这是要隐藏的div</div>

위 코드에서는 CSS에서 스타일을 지정하기 위해 div 태그에 id 속성을 추가했습니다. 동시에 div의 가시성 속성을 숨김으로 설정하여 숨겨집니다.

2.2 Show div

숨겨진 div를 표시하려면 가시성 속성을 visible로 설정하세요. 예는 다음과 같습니다.

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="visibility:hidden;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.visibility = "visible";
}
</script>

위 코드에서는 버튼을 추가하고 이에 onclick 이벤트를 바인딩했습니다. 사용자가 버튼을 클릭하면 showDiv() 함수가 호출되고 div의 가시성 속성이 visible로 설정됩니다. 나타나도록 합니다.

3. 결론

위의 예를 통해 표시 속성과 가시성 속성을 모두 사용하여 div를 표시하고 숨길 수 있음을 알 수 있습니다. 차이점은 표시 속성은 페이지에서 요소를 완전히 제거하는 반면 가시성 속성은 요소를 숨기는 것뿐입니다. 따라서 숨기기와 표시 사이에서 요소의 위치를 ​​유지해야 하는 경우 visible 속성을 사용하도록 선택해야 합니다.

물론 더 나은 사용자 경험을 위해 CSS 애니메이션을 사용하여 div 표시 및 숨기기에 그라데이션이나 기타 효과를 추가할 수도 있습니다. 이는 CSS의 전환 또는 애니메이션 속성을 결합하여 달성해야 합니다. 관심 있는 독자는 온라인에서 관련 튜토리얼을 찾을 수 있습니다.

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