CSS의 표시 속성을 사용하여 div 요소를 숨기고 표시하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS의 표시 속성을 사용하여 div 요소를 숨기고 표시하는 방법

PHPz

Apr 21, 2023 am 11:20 AM

페이지의 특정 요소를 숨기거나 표시하려면 CSS 표시 속성을 사용하는 경우가 많습니다. 이 글에서는 CSS의 표시 속성을 사용하여 div 요소를 숨기고 표시하는 방법에 중점을 둘 것입니다.

1. CSS의 표시 속성

CSS의 표시 속성에는 많은 값이 있으며 그 중 일반적으로 사용되는 값은 다음과 같습니다.

none: 요소를 숨기고 요소가 차지하는 공간을 해제합니다.
block: 요소를 블록 수준 요소로 표시합니다.
inline-block: 요소를 인라인 블록 수준 요소로 표시합니다.
inline: 요소를 인라인 요소로 표시합니다.
table: 요소를 테이블 요소로 표시합니다.
table-row: 요소를 테이블 행 요소로 표시합니다.
table-cell: 요소를 테이블 셀 요소로 표시합니다.

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

div 요소 숨기기

표시 속성을 사용하면 div 요소를 숨기고 요소가 차지하는 공간을 해제할 수 있습니다.

div {
  display: none;
}

로그인 후 복사

Show the div 요소

display 속성 사용은 div 요소를 블록 수준 요소로 표시합니다.

div {
  display: block;
}

로그인 후 복사

div 요소를 인라인 블록 수준 요소로 표시하려면 display 속성을 사용합니다.

div {
  display: inline-block;
}

로그인 후 복사

div 요소를 표시하려면 display 속성을 사용합니다. 요소를 인라인 요소로 표시:

div {
  display: inline;
}

로그인 후 복사

표시 속성을 사용하여 div 요소를 인라인 요소로 표시 요소를 테이블 요소로 표시:

div {
  display: table;
}

로그인 후 복사

표시 속성을 사용하여 div 요소를 테이블 행 요소로 표시:

div {
  display: table-row;
}

로그인 후 복사

div 요소를 테이블 셀 요소로 표시하려면 display 속성을 사용하세요.

div {
  display: table-cell;
}

로그인 후 복사

3. JavaScript를 사용하여 div 요소 숨기기 및 숨기기를 제어합니다. Display

사용자가 div 요소의 숨기기 및 표시를 제어하려면 버튼을 클릭하면 JavaScript를 사용하여 이를 달성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示/隐藏div元素</title>
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      display: block;
    }
  </style>
</head>
<body>
  <button onclick="toggleDiv()">显示/隐藏div元素</button>
  <div id="myDiv"></div>
  <script>
    function toggleDiv() {
      var div = document.getElementById("myDiv");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
  </script>
</body>
</html>

로그인 후 복사

예제에서는 사용자가 버튼을 클릭하면 ID가 myDiv인 div 요소를 JavaScript를 통해 가져오고 해당 요소의 표시 스타일 속성이 없음인지 확인하고, 없으면 차단으로 설정합니다. 없음입니다. 이는 div 요소의 숨기기 및 표시를 구현합니다.

요약

이 글의 소개를 통해 우리는 CSS의 표시 속성이 페이지 요소의 표시 및 숨김 상태를 제어하는 데 사용되는 매우 중요한 속성임을 알 수 있습니다. CSS를 통해 요소의 상태를 직접 제어하든, JavaScript를 통해 대화형 기능을 구현하든, 표시 속성의 사용법을 익히는 것이 매우 필요합니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.