CSS에서 div를 숨기고 표시하는 방법

DIV CSS 숨기기 및 표시

DIV는 HTML 태그의 중요한 요소로 텍스트, 그림, 비디오 등을 표시하는 데 사용할 수 있습니다. 웹 디자인에서는 CSS를 사용하여 DIV를 설정해야 하는 특정 요소를 숨기거나 표시해야 하는 상황에 자주 직면합니다. 이 기사에서는 CSS를 사용하여 DIV를 숨기고 표시하는 방법을 소개합니다.

1. CSS 표시 속성

CSS 표시 속성은 페이지에 요소가 표시되는 방식을 제어할 수 있습니다. 디스플레이에는 여러 값이 있으며 다음이 일반적으로 사용됩니다.

1. none: 요소가 표시되지 않고 페이지 공간을 차지하지 않습니다.
2. block: 요소가 전체 너비를 차지하는 블록 수준 컨테이너를 생성하며 종종 텍스트 또는 그림과 같은 블록 수준 요소를 표시하는 데 사용됩니다.
3. 인라인: 요소는 한 줄을 차지하지 않고 자체 너비와 높이만 차지합니다. 링크 및 그림과 같은 인라인 요소를 표시하는 데 자주 사용됩니다. inline-block: 인라인과 비슷하지만 너비와 높이를 설정할 수 있습니다. 높이
4. flex: 요소의 공간을 유연하게 할당할 수 있는 유연한 레이아웃입니다.
5. CSS의 표시 속성을 설정하여 DIV를 숨기고 표시할 수 있습니다.

다음은 설명을 위한 예입니다.

HTML 파일에서 DIV 요소를 만듭니다.

그런 다음 CSS 파일에서 DIV의 표시 속성을 설정합니다.

#myDiv{

  display:none;   /* 默认隐藏 */

}

페이지가 로드되면 DIV 요소가 숨겨집니다. 이 시점에서 마우스 클릭 시 표시 효과를 얻기 위해 이벤트를 추가해야 합니다.

JavaScript에서는 요소의 스타일 속성을 설정하여 요소를 숨기고 표시하도록 설정하여 CSS의 표시 속성을 변경할 수 있습니다. 구체적인 작업은 다음과 같습니다.

/

/ var myDiv = document.getElementById('myDiv');
/

/ 함수 showDiv()를 표시합니다.

   myDiv.style.display = 'block';

/

/ 함수 HiddenDiv(){

   myDiv.style.display = 'none';

이런 식으로 마우스를 클릭하면 DIV가 페이지에 다음과 같이 표시됩니다. 블록 수준 요소. 다시 클릭하면 다시 숨겨집니다.

2. CSS 가시성 속성

요소의 숨기기 및 표시를 제어하는 ​​또 다른 속성은 가시성입니다. 가시성은 표시(visible)와 숨김(hidden)의 두 가지 값을 갖습니다. 표시와 달리 가시성을 숨김으로 설정하면 요소가 숨겨지지만 여전히 페이지 공간을 차지합니다.

HTML 파일에서 DIV 요소도 생성합니다:

그런 다음 CSS 파일에서 DIV를 설정합니다. 가시성 속성:

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

페이지가 로드되면 이 DIV 요소가 숨겨집니다. 이때 마우스 클릭 시 표시 효과를 얻기 위해 이벤트를 추가해야 합니다.

JavaScript에서는 스타일 속성을 변경하여 요소의 가시성 속성을 변경할 수도 있습니다. 다음은 특정 코드입니다.

/

/ var myDiv = document.getElementById('myDiv');
/

/ 함수 showDiv()를 표시합니다.{

   myDiv.style.visibility = 'visible';

/

/ 함수 HiddenDiv(){

   myDiv.style.visibility = 'hidden';

이렇게 하면 마우스를 클릭하면 DIV가 표시됩니다. 다시 클릭하면 다시 숨겨집니다.

3. 요약

웹 디자인에서는 요소를 표시하고 숨기는 것이 매우 일반적인 요구 사항입니다. 요소 숨기기 및 표시를 제어하는 ​​방법에는 크게 두 가지가 있습니다. 하나는 요소의 표시 속성을 수정하여 제어하는 ​​것이고, 다른 하나는 요소의 가시성 속성을 수정하여 제어하는 ​​것입니다. 이 두 가지 방법을 익히면 다양한 요소의 표시 및 숨기기를 보다 유연하게 제어할 수 있어 더 나은 웹 페이지 표시 효과를 얻을 수 있습니다.

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