By aPOST in 자바스크립트 — 2024년 3월 9일

[javascript] jQuery로 요소가 보이지 않는지 확인하기

jQuery의 is() 함수를 사용해서 대상 요소가 보이거나 보이지 않는지 확인할 수 있습니다. is() 함수로 대상 요소의 CSS 화면 표시 속성인 visibility 속성의 값을 확인합니다.

$(element).is(":visible");
$(element).is(":hidden");

또는 쿼리 선택자로 속성까지 표시 해서 is() 함수 없이 한번에 확인할 수 있습니다.

$("element:visible");
$("element:hidden");

CSS visibility 속성으로 접근해서 속성 값을 확인하는 방식으로 다음과 같이 대상 요소의 표시 여부를 확인할 수 있습니다.

$(element).css("visibility")

요소가 감추어져서 보이지 않는지를 확실하게 체크하려면 처음의 is() 함수를 사용해서 체크해야 합니다. css() 함수로 요소의 visibility 속성을 체크하면 요소 자체의 속성 값을 확인할 수는 있지만, 부모 요소의 영향을 받아 해당 요소가 보이지 않는지를 확인할 수는 없습니다.

예를 들어 다음처럼 중첩 HTML 태그에서 자식 요소(#child)의 visibility 속성은 보이도록 되어 있지만, 부모 요소(#parent)의 <div> 태그 visibility 속성이 감춤으로 되어있을 때 is()와 css()의 결과를 확인해보겠습니다.

<html lang="en">
<head>
    <style>
        #parent{
            visibility: hidden;
        }
        #child{
            visibility: visible;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>    
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script src="./commentjson.js"></script>
    <script>
        console.log($('#child').is('visible'))
        console.log($('#child').css('visibility') == 'visible')
    </script>
</body>
</html>

css() 함수로 자식 요소의 표시 여부를 확인한 결과는 "visible"로 보이는 것으로 속성 값을 반환하지만 is() 함수는 실제로 해당 요소가 표시되는지를 상속 관계까지 고려해서 실제로 보이는지를 불리언으로 알려줍니다.

$("#child:visible") 결과 또한 CSS 속성 값을 기준으로 요소를 선택하기 때문에 자식 요소가 선택되어 반환됩니다. css() 함수로 결과를 얻는 것과 같습니다.