javascript 제이쿼리 jQuery에서 요소가 숨겨져 있는지 확인하려면 어떻게해야합니까?




제이쿼리 visibility (24)

.hide() , .show() 또는 .toggle() 함수를 사용하여 요소의 가시성을 토글 할 수 있습니다.

요소가 보이거나 숨겨져 있는지 어떻게 테스트 할 수 있습니까?


요소가 UI에 표시되는지 여부를 측정하기 위해 가시성 / 표시 특성을 확인하기 위해 함수를 작성할 수 있습니다.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

일하는 바이올린


$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

출처:

Blogger Plug n Play - jQuery 도구 및 위젯 : jQuery를 사용하여 요소가 숨겨 지거나 표시되는지 확인하는 방법

jsFiddle :

JSFiddle - ipsjolly - k4WWj


일반 JavaScript를 사용하여이 작업을 수행 할 수도 있습니다.

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

노트:

  1. 어디서나 작동합니다.

  2. 중첩 된 요소에 대한 작동

  3. CSS 및 인라인 스타일 작업

  4. 프레임 워크가 필요하지 않습니다.


부울 값을 확인하여 가시성을 확인하기 만하면됩니다.

if (this.hidden === false) {
    // Your code
}

각 기능에이 코드를 사용했습니다. 그렇지 않으면 요소 is(':visible') 를 사용하여 요소의 가시성을 검사 할 수 있습니다.


이 답 중 어느 것도 내가 이해하고있는 질문인데, 이는 내가 찾고있는 것입니다. " visibility: hidden 을 가진 항목을 어떻게 처리합니까 visibility: hidden 입니까?" . :visible:hidden 은 둘 다 문서에 따라 디스플레이를 찾고 있기 때문에이를 처리하지 못합니다. 내가 알 수있는 한 CSS 가시성을 처리 할 셀렉터가 없습니다. 다음은이를 해결 한 방법입니다 (표준 jQuery 선택기, 압축 된 구문이있을 수 있음).

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

나는 CSS 클래스를 사용할 것이다 .hide { display: none!important; } .hide { display: none!important; } .

숨기기 / 표시를 위해 .addClass("hide")/.removeClass("hide") 호출합니다. 가시성을 확인하기 위해 .hasClass("hide") 합니다.

.toggle() 또는 .animate() 메소드를 사용하지 않으려는 경우 요소를 확인 / 숨기기 / 표시하는 간단하고 명확한 방법입니다.


다음과 같이 hidden 이나 visible 속성을 사용하면됩니다.

$('element:hidden')
$('element:visible')

또는 다음과 같이 동일하게 단순화 할 수 있습니다.

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

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

위의 방법은 부모의 가시성을 고려하지 않습니다. 부모도 고려하려면 .is(":hidden") 또는 .is(":visible") 을 사용해야합니다.

예를 들어,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

위의 방법은 div2 보이는 동안은 :visible not로 간주합니다. 그러나 위의 경우는 많은 경우에 유용 할 수 있습니다. 특히 숨겨진 상위 항목에 오류 div가 있는지 확인해야하는 경우가 있습니다. 이러한 조건에서는 :visible 가 작동하지 않기 때문입니다.


adblocker에 대한 눈에 보이는 검사를 사용하는 예가 활성화되었습니다.

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck"는 adblocker가 차단하는 ID입니다. 그래서 그것이 눈에 보이면 당신은 adblocker가 켜져 있는지 감지 할 수 있습니다.


둘 다 확인해야합니다 ... 표시 및 표시 여부 :

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

$(this).is(":visible") 를 확인하면 jQuery는 자동으로 두 가지를 확인한다.


요소 가시성 및 jQuery 작동 방식

요소는 display:none , visibility:hidden 또는 opacity:0 으로 숨길 수 있습니다. 이러한 방법의 차이점은 다음과 같습니다.

  • display:none 은 요소를 숨기고 아무 공간도 차지하지 않습니다.
  • visibility:hidden 은 요소를 숨기지 만 여전히 레이아웃에서 공간을 차지합니다.
  • opacity:0 은 "visibility : hidden"으로 요소를 숨기며 레이아웃에서 여전히 공간을 차지합니다. 유일한 차이점은 불투명도로 인해 요소를 부분적으로 투명하게 만들 수 있다는 것입니다.

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    유용한 jQuery 토글 메소드 :

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

jQuery 문서 에 따른 :visible 셀렉터 :

  • CSS display 값은 none 입니다.
  • 그것들은 type="hidden" form 요소입니다.
  • 폭과 높이는 명시 적으로 0으로 설정됩니다.
  • 조상 요소는 숨겨져 있으므로 요소는 페이지에 표시되지 않습니다.

visibility: hidden 요소 visibility: hidden 또는 opacity: 0 은 여전히 ​​레이아웃에서 공간을 사용하므로 보이도록 간주됩니다.

어떤 경우에는 유용하고 다른 요소에서는 쓸모가 없습니다. 왜냐하면 요소가 보이는지 ( display != none ), 부모의 가시성을 무시하고 싶다면 .css("display") == 'none' 는 빠를뿐만 아니라 가시성 검사를 올바르게 반환합니다.

디스플레이 대신 가시성을 확인하려면 .css("visibility") == "hidden" 을 사용해야합니다.

또한 추가 jQuery 노트 를 고려 하십시오 .

왜냐하면 :visible 은 jQuery 확장이며 CSS 사양의 일부가 아니기 때문에 :visible 을 사용하는 쿼리는 네이티브 DOM querySelectorAll() 메서드에서 제공하는 성능 향상을 이용할 수 없습니다. 선택된 요소를 :visible 때 최상의 성능을 얻으려면 먼저 순수 CSS 셀렉터를 사용하여 요소를 선택한 다음 .filter(":visible") .

또한 퍼포먼스가 걱정된다면, 지금 나를 보아라 ... 퍼포먼스 표시 / 숨기기 (2010-05-04)를 체크해야한다. 다른 방법을 사용하여 요소를 표시하거나 숨 깁니다.


이것은 작동 할 수 있습니다 :

expect($("#message_div").css("display")).toBe("none");

예:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>


ebdivstyle="display:none;" 으로 설정해야합니다 style="display:none;" . 그것은 show와 hide 모두에 대해 작동합니다 :

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

또한 요소의 상태를 확인하고이를 토글하는 3 진 조건부 표현식이 있습니다.

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

흔히 볼 수있는 것이 있는지 확인하는 즉시, 바로 바로 가고 다른 것으로하십시오. jQuery 체인을 사용하면이 작업을 쉽게 수행 할 수 있습니다.

따라서 선택기가 있고 표시되거나 숨겨진 경우에만 액션을 수행하려는 경우 filter(":visible") 또는 filter(":hidden") 사용하여 원하는 액션으로 연결할 수 있습니다 갖다.

if 문 대신에 다음과 같이 :

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

아니면 더 효율적이지만 더 못생긴 :

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

한 줄에 모든 것을 할 수 있습니다.

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

From 토글 된 요소의 상태는 어떻게 결정합니까?

:visible:hidden 선택자를 사용하여 요소가 축소되었는지 여부를 결정할 수 있습니다.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

가시성을 기반으로 요소에 대해 작업을 수행하는 경우에는 selector 표현식에 :visible 또는 :hidden 을 포함하면됩니다. 예 :

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');


Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout ( visible : jQuery : visible Selector에 설명 된대로) Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout 되므로 요소가 실제로이 방식으로 표시되는지 확인할 수 있습니다.

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

어쩌면 이렇게 할 수있을거야.

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>


보이지 않는지 확인하려면 사용합니다 ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

또는 다음은 sam입니다. jQuery 선택기를 변수에 저장하면 여러 번 필요할 때 더 나은 성능을 얻을 수 있습니다.

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

jQuery의 :hidden 선택기에 대해 요소를 테스트 할 때 절대 위치 지정 요소는 자식 요소가 표시 되더라도 숨김으로 인식 될 수 있습니다 .

처음에는 반 직관적 인 것처럼 보입니다. jQuery 문서를 자세히 살펴보면 관련 정보가 제공됩니다.

요소는 여러 가지 이유로 숨겨진 것으로 간주 될 수 있습니다. [...] 폭과 높이가 명시 적으로 0으로 설정됩니다. [...]

이 사실은 요소의 상자 모델과 계산 된 스타일과 관련하여 실제로 의미가 있습니다. 너비와 높이가 명시 적 으로 0 으로 설정되지 않더라도 암시 적 으로 설정 될 수 있습니다.

다음 예를 살펴보십시오.

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

JQUERY 3.x 업데이트 :

jQuery 3을 사용하면 설명 된 동작이 변경됩니다! 너비 및 / 또는 높이가 0 인 요소를 포함하여 레이아웃 상자가있는 요소는 보이는 것으로 간주됩니다.

JSFiddle with jQuery 3.0.0-alpha1 :

http://jsfiddle.net/pM2q3/7/

같은 JS가 다음과 같은 출력을 갖습니다.

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false




visibility