How To - 숨겨진 요소 확인

w3.css

숨겨진 요소 확인

JavaScript를 사용하여 요소가 숨겨져 있는지 확인하는 방법을 알아보자.

숨겨진 요소 확인

<div> 요소가 숨겨져 있는 경우 다음과 같이 하자.

1단계) HTML 추가

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    // Do something..
  }
}

기본 예시

예제 보기

요소가 display:none(위의 예처럼)로 숨겨진 경우, 요소는 공간을 차지하지 않는다.
요소가 visibility:hidden로 숨겨져 있는지 알아보려면 아래 예를 참조하자. 이 “hidden” 요소는 공간을 차지한다.

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    // Do something..
  }
}

기본 예시

예제 보기