javascript - 여부 - 제이쿼리 visibility




jQuery에서 요소가 숨겨져 있는지 확인하려면 어떻게해야합니까? (20)

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

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


스타일 편집이 아닌 클래스 토글 링 사용 . .

"숨기기"요소에 지정된 클래스를 사용하는 것이 가장 쉽고 가장 효율적인 방법 중 하나입니다. Display 스타일 '없음'으로 '숨김'클래스를 전환하면 해당 스타일을 직접 편집하는 것보다 빠르게 수행됩니다. 질문에서 두 요소를 표시하거나 숨기는 것을 똑같이 설명했습니다 .

JavaScript 모범 사례 및 최적화

다음은 Google 프런트 엔드 엔지니어 인 Nicholas Zakas의 Google Tech Talk의 진정한 계몽 비디오입니다.


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

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

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

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

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

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

결국, 어떤 예도 나에게 어울리지 않는다. 그래서 나는 내 자신을 썼다.

테스트 (Internet Explorer filter:alpha 지원 안 함 filter:alpha ) :

a) 문서가 숨겨져 있지 않은지 확인

b) 요소의 너비 / 높이 / 불투명도가 0인지 또는 display:none 되는지 확인합니다 display:none / visibility:hidden 인라인 스타일에서 visibility:hidden

c) 요소의 모든 픽셀 / 모서리를 테스트하는 것보다 빠르기 때문에 중심이 다른 요소 (및 모든 조상, 예 : overflow:hidden / 스크롤 / 한 요소를 초과하는 요소) 또는 화면 가장자리에 의해 숨겨지지 않는지 확인합니다.

d) 너비 / 높이 / 불투명도 또는 display:none 가없는 요소가 있는지 확인합니다 display:none / visibility : 계산 된 스타일에서 숨김 (모든 조상 중에서)

에서 테스트 됨

Android 4.4 (기본 브라우저 / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 문서 모드 + Internet Explorer 8 가상 머신), Safari (Windows / Mac / iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

사용하는 방법:

is_visible(elem) // boolean


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

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

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


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

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

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


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

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

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

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

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


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

$(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>


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

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

일하는 바이올린


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

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

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

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

일반 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. 프레임 워크가 필요하지 않습니다.


흔히 볼 수있는 것이 있는지 확인하는 즉시, 바로 바로 가고 다른 것으로하십시오. 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" });

hidden 선택기를 사용할 수 있습니다.

// Matches all elements that are hidden
$('element:hidden')

그리고 visible 선택자 :

// Matches all elements that are visible
$('element:visible')

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;
    }
});

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

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

$('#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


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 가 작동하지 않기 때문입니다.







visibility