반응형
jQuery를 이용하여 요소가 숨겨져 있는지 확인하기 위해서는 아래 방법을 추천합니다.
$(element).is(":visible");
$(element).is(":hidden");:visible과 :hidden은 동일하게 표시/비표시 여부를 리턴해주지만 결과 값은 반대입니다.
:visible은 표시 여부이니 표시가 될 때는 true, 비표시 될 때는 false를 리턴하고
:hidden은 숨김 여부이니 비표시일 때는 true, 표시일 때는 false를 리턴합니다.
참고로 style의 display값과는 상관 없이 자신이 아무리 display:block으로 표시처리일지라도 부모 요소가 숨김 상태이라면 자신 또한 숨김 상태가 되므로 display 값으로 판단하는건 비추천합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>테스트</title>
</head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
console.log("div1 visible : " + $("#div1").is(":visible"));
console.log("div2 visible : " + $("#div2").is(":visible"));
console.log("div1 hidden : " + $("#div1").is(":hidden"));
console.log("div2 hidden : " + $("#div2").is(":hidden"));
});
</script>
<body>
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
</body>
</html>예를 들어 위의 코드를 실행할 경우 아래와 같은 결과 값을 출력하게 됩니다.
div1 visible : false
div2 visible : false
div1 hidden : true
div2 hidden : true반응형
'IT이야기' 카테고리의 다른 글
| Git 아직 Push 되지 않은 커밋 메시지 수정하는 방법 (0) | 2021.02.09 |
|---|---|
| javascript로 페이지 이동하기 (0) | 2021.02.09 |
| 자바스크립트(javascript) 배열(array)에서 특정 값 제거하는 방법 (0) | 2021.02.07 |
| 로컬 Git 브런치 이름 변경하는 방법 (0) | 2021.02.07 |
| Git 커밋하기 전에 git add 취소하는 방법 (0) | 2021.02.07 |