JavaScript로 요소 숨김 여부 확인하기
웹 개발을 하다 보면 특정 요소가 현재 화면에 표시되고 있는지, 아니면 숨겨져 있는지 확인해야 하는 경우가 자주 발생합니다. 이럴 때 window.getComputedStyle() 메서드를 활용하면 아주 간단하게 확인할 수 있습니다.
핵심 원리
window.getComputedStyle() 메서드는 해당 요소에 실제로 적용된 모든 CSS 스타일 값을 계산하여 반환합니다. 이 결과에서 display 속성 값이 "none"이라면 그 요소가 현재 숨겨져 있다는 것을 의미합니다.
예제 코드
다음은 버튼을 클릭했을 때 숨겨진 DIV 요소의 상태를 확인하고, 숨겨져 있다면 화면에 표시하는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.hiddenDiv {
width: 100%;
padding: 20px;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
font-size: 20px;
}
.showBtn {
border: none;
padding: 15px;
font-size: 18px;
background-color: rgb(86, 25, 155);
color: white;
}
</style>
</head>
<body>
<h1>JavaScript로 숨겨진 요소 찾기</h1>
<h2>아래 버튼을 클릭하면 숨겨진 요소가 표시됩니다</h2>
<button class="showBtn">Show element</button>
<div class="hiddenDiv">
This is a DIV element
</div>
<script>
document.querySelector(".showBtn").addEventListener("click", showHidden);
function showHidden() {
var x = document.querySelector(".hiddenDiv");
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block";
}
}
</script>
</body>
</html>코드 설명
위 예제의 동작 흐름은 다음과 같습니다.
1. document.querySelector(".showBtn")으로 버튼 요소를 선택하고, 클릭 이벤트 리스너를 등록합니다.
2. 버튼을 클릭하면 showHidden() 함수가 실행되어 .hiddenDiv 클래스를 가진 DIV 요소를 가져옵니다.
3. window.getComputedStyle(x).display로 해당 요소의 display 값을 확인하고, 값이 "none"이면 숨겨져 있는 상태이므로 x.style.display = "block"을 통해 요소를 화면에 표시합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 "Show element" 버튼을 클릭하면, 숨겨져 있던 DIV 요소가 화면에 나타나는 것을 확인할 수 있습니다.
마무리
이처럼 window.getComputedStyle() 메서드를 사용하면 인라인 스타일이 아니라 CSS 파일이나 클래스로 설정된 스타일까지 포함하여 요소의 실제 렌더링 상태를 정확하게 판별할 수 있습니다. 요소의 표시 여부에 따라 조건 분기 처리가 필요한 UI 로직을 구현할 때 유용하게 활용해 보시기 바랍니다.