Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 스타일 가시성 속성


HTML DOM 스타일 가시성 속성은 HTML 문서에서 요소를 표시할지 여부를 반환하고 수정합니다.

구문

다음은 구문입니다 -

  • 가시성 회복

object.style.visibility
  • 가시성 수정

object.style.visibility = “value”

여기서 값은 -

일 수 있습니다.
설명
초기 이 속성 값을 기본값으로 설정합니다.
상속 상위 요소에서 이 속성 값을 상속합니다.
숨김 요소는 보이지 않지만 여전히 존재는 레이아웃에 영향을 미칩니다.
보임 요소가 표시됩니다.
접기 테이블의 행이나 열에 있는 요소는 보이지 않지만 여전히 존재하면 레이아웃에 영향을 미칩니다.

예시

HTML DOM 스타일 가시성 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
   }
</style>
</head>
<body>
<h1>DOM Style visibility Property Example</h1>
<p>I'm paragraph element with some dummy text</p>
<button onclick="add()" class="btn">Set visibility</button>
<script>
   function add() {
      document.querySelector('p').style.visibility = "hidden";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 스타일 가시성 속성

'공개 설정을 클릭합니다. 단락 요소의 값으로 숨김으로 가시성을 설정하는 "버튼 -

HTML DOM 스타일 가시성 속성