By aPOST in 자바스크립트 —

자바스크립트로 HTML 요소가 보이는지 체크하기

".element" 클래스를 가진 요소가 보이는지를 체크하는 코드를 이용해서 HTML 요소가 보이는지를 판별하는 코드를 알아보겠습니다.

<body>
    <div class="element"></div>
</body>

CSS는 다음과 같이 클래스를 정의해서 HTML 요소의 화면 표시에 관계된 속성들을 적용해서 확인합니다.

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.element{
  /*
  display: none;
  visibility: hidden;
  opacity: 0;
  */
  width: 100%;
  height: 100%;
}

먼저 화면을 표시하는데 관계된 속성 3가지를 알아보겠습니다.

요소의 화면 표시 속성 3가지

HTML 요소의 화면 표시에 관여하는 속성은 3가지가 있습니다.

3가지 속성은 각각 용도가 다르며, 화면에 표시되지 않고 감추어졌을 때 다르게 동작하는 특징이 있습니다.

각각의 속성은 다음과 같은 특징이 있습니다.

특징에 따라 적절한 속성을 골라서 사용해야 합니다.

속성 Collapse Event Tab-order
opacity: 0; X O O
visibility: hidden; X X X
display: none; O X X

표로 보면 복잡하지만 쉽게 요약하면 다음 2가지 중요한 차이점이 있습니다.

  • "display: none;" 속성은 요소가 영역을 차지하지 않고 없는 요소처럼 동작합니다. 나머지 2가지 속성("opacity: 0;", "visibility: hidden;")은 화면에 보이지는 않지만 자리를 차지합니다.
  • "opacity: 0;" 속성은 이벤트 처리 및 탭 오더 속성을 사용할 수 있습니다. 화면에 보이지만 않을 뿐 일반 요소와 동일합니다.

먼저 jQuery로 요소가 보이는지 체크하는 방법을 알아보겠습니다.

자바스크립트로 구현하는 방법은 뒤에 이어서 알아봅니다.

자바스크립트로 구현하는 방법은 jQuery가 화면 요소가 보이는지 판단하는 내부 구현 로직을 그대로 가져오는 것이기 때문에 jQuery의 방식을 먼저 알아둘 필요가 있습니다.

jQuery로 요소가 보이는지 체크하기

jQuery는 2가지 CSS 속성 셀렉터로 보이는 요소를 선택하는 방식으로 체크를 할 수 있습니다.

$('.element:hidden')

$('.element:visible')

if($(".element:visible").length){
	//보이는 요소가 있음
}

둘은 서로 반대의 불리언 값을 반환합니다. ":hidden"이 true이면 ":visible"은 false가 됩니다.

반드시 주의해야 하는 점이 있는데 ":visible" 속성, 즉 화면에 보이는 기준을 정확히 알아야 합니다.

":visible" 속성은 화면에 보이지 않아도 자리를 차지하면 보이는 것으로 간주합니다.

요소의 화면 표시 속성 3가지 중 자리를 차지하지 않는 것은 "display: none;" 속성 1가지입니다.

속성 $('.element:visible') $('.element:hidden')
opacity: 0; true false
visibility: hidden; true false
display: none; false true

CSS 속성을 기준으로

"display: none;" 은 ":visible" 속성으로 체크를 하면 false가 되지만

"visibility: hidden;"과 "opacity: 0;" 은 true가 됩니다.

":hidden" 속성은 그 반대가 됩니다.

그밖에 CSS 속성으로 직접 CSS 속성의 값을 체크할 수도 있습니다.

if ( $('.element').css('display') == 'none' || $('.element').css('visibility') == 'hidden'){
}

javascript로 요소가 보이는지 체크하기

자바스크립트로 HTML 요소가 보이는지를 판단하는 방법은 앞서 언급한 대로 jQuery의 내부 구현 방식을 그대로 사용합니다.

HTML 요소(Elemetn)에는 offsetWidth, offsetHeight 2가지 속성 값이 있고, 이 값이 모두 0보다 크면 요소가 화면에 보이는 것입니다. 따라서 다음과 같은 조건문으로 요소가 보이는지를 판단합니다.

if(element.offsetWidth > 0 && element.offsetHeight > 0){
	//요소가 자리를 차지하지 않고 보이지 않음 - display: none;과 같음
};

이 조건 체크를 프로토타입으로 HTML 요소의 메서드로 구현하면 jQuery처럼 간단한 방식으로 HTML 요소가 보이는지를 확인할 수 있습니다.

프로토타입 메서드는 상위 객체인 Object 객체에 구현을 할 수도 있지만, 적용 범위가 작을 수도록 자바스크립트 실행 오버헤드가 작아지기 때문에 최소한인 HTMLElement에 메서드를 구현하는 것이 좋습니다.

HTMLElement.prototype.visible = function(){
	return this.offsetWidth > 0 && this.offsetHeight > 0;
};
console.log(document.querySelector('.element').visible());

자리를 차지하지만 화면에는 보이지 않는지를 체크하려면 요소의 스타일 속성으로 직접 비교해야 합니다.

요소의 화면 표시와 관련된 속성을 비교하는 방법은 다음과 같습니다.

"window.getComputedStyle(element)" 은 자바스크립트에서 ".element" 클래스의 CSS 속성이 적용된 요소 스타일(style) 객체에 접근할 수 있도록 해주는 전역 메서드입니다.

if(window.getComputedStyle(element).display === "none"){
	//CSS 속성이 "none"이면 안보임
}

보이지 않는 요소의 이벤트 실행

"opacity: 0;" 속성을 제외하고 나머지 "visibility: hidden;"과 "display: none;" 속성을 가진 요소는 이벤트가 발생하지 않으며, 이벤트를 등록해도 실행되지 않습니다.

다음과 같이 "visibility: hidden;" 속성을 추가한 요소는 클릭 이벤트를 등록해도 클릭 이벤트가 발생하지 않습니다.

let el = document.querySelector('.element');
el.style.visibility = "hidden";//영역을 차지하지만 보이지 않게 처리

//클릭 이벤트 생성해서 요소 속성에 접근하는 코드
el.addEventListener('click', function(){
  //visibility가 hidden이어서 이벤트가 발생하지 않음
  document.querySelector('.element').style.visibility = "visible";
  console.log("클릭.");//이벤트 발생하지 않음.
});

 

사용한 예제 코드들은 다음 링크에서 다운로드 받아서 확인할 수 있습니다.

checkvisible.zip0.00MB

자바스크립트 관련글
글 196 개 모두보기 →