요소가 'display:none'이거나 블록인 경우 jQuery를 사용하여 확인합니다.

요소가 'display:none'이거나 블록인 경우 jQuery를 사용하여 확인합니다.

나는 숨겨진 요소들을 확인하고 분류하고 싶습니다.속성이 있는 모든 요소를 찾을 수 있습니까?display및 가치none?

:visible for visible 요소와 :hidden을 사용하여 숨겨진 요소를 찾을 수 있습니다.이 숨겨진 요소들은display설정된 속성none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

특정 요소를 확인합니다.

if($('#yourID:visible').length == 0)
{

}

요소가 문서의 공간을 사용하는 경우 요소가 표시되는 것으로 간주됩니다.가시적 요소의 폭 또는 높이가 0보다 큽니다. 참조

is()를 다음과 같이 사용할 수도 있습니다.:visible

if(!$('#yourID').is(':visible'))
{

}

디스플레이 값을 확인하고 싶다면 css()를 사용할 수 있습니다.

if($('#yourID').css('display') == 'none')
{

}

를 사용하는 경우 다음 값을 표시합니다.display가질 수 있습니다.

표시: 없음

표시: 인라인

표시: 블록

표시: 목록 항목

표시: 인라인 블록

가능한 전체 목록 확인display값을 입력합니다.

JavaScript를 사용하여 표시 속성을 확인하려면 다음과 같이 하십시오.

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

$("element").filter(function() { return $(this).css("display") == "none" });

네, 당신은 css 기능을 사용할 수 있습니다.아래는 모든 div를 검색하지만 필요한 요소에 대해 수정할 수 있습니다.

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});

jQuery에는 가시성을 확인하는 두 가지 방법이 있습니다.

$("#selector").is(":visible")

그리고.

$("#selector").is(":hidden")

셀렉터의 가시성을 기준으로 명령을 실행할 수도 있습니다.

$("#selector:visible").hide()

또는

$("#selector:hidden").show()

다음 조건을 사용합니다.

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}

$('#selector').is(':visible');

라이브 데모

<div id="div" style="display: none"></div>
<button class="try">Try now</button>

<script type="text/javascript">
$(document).on('click','.try',function() {
var style = $('#div');
if (style.css("display") == "none") {
  alert("display not available");
}
});
</script>

내가 개인적으로 .is() 또는 .length보다 선호하는 또 다른 바로 가기:

if($('.myclass:visible')[0]){
   // is visible
}

그것은 그냥 돌아올 것입니다.undefined선택기에 대한 돔-키워드를 찾을 수 없는 경우.myclass:visible

언급URL : https://stackoverflow.com/questions/15924751/check-using-jquery-if-an-element-is-displaynone-or-block-on-click