54 Pytanie: Jak sprawdzić, czy element jest ukryty w jQuery?

pytanie utworzone w Sun, Oct 30, 2016 12:00 AM

Możliwe jest przełączanie widoczności elementu za pomocą funkcji .hide(), .show() lub .toggle().

Jak przetestowałbyś, czy element jest widoczny lub ukryty?

    
7282
  1. Warto wspomnieć (nawet po tym wszystkim), że $(element).is(":visible") działa dla jQuery 1.4.4, ale nie dla jQuery 1.3.2, pod Internet & nbsp; Explorer & nbsp; 8 . Można to sprawdzić za pomocą pomocnego fragmentu testu Tsvetomira Tsoneva . Pamiętaj tylko, aby zmienić wersję jQuery, aby przetestować ją pod każdym.
    2011-02-01 03: 57: 34Z
  2. Jest to związane z innym pytaniem: stackoverflow.com/questions/17425543/…
    2016-03-22 19: 20: 54Z
  3. Jaka jest twoja definicja ukrytego?
    2018-05-19 07: 29: 38Z
30 odpowiedzi                              30                         

Ponieważ pytanie odnosi się do pojedynczego elementu, ten kod może być bardziej odpowiedni:

 
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Tak samo jak sugestia twernta , ale zastosowany do pojedynczego elementu; i pasuje do algorytmu zalecanego w FAQ jQuery

    
8935
2018-07-02 15: 50: 46Z
  1. To rozwiązanie wydaje się zachęcać do konfiskaty visible=false i display:none; mając na uwadze, że rozwiązanie Mote wyraźnie zniechęca koderów do sprawdzenia display:none; (poprzez wzmiankę o hide i show, które kontrolują display:none, nie visible=true)
    2010-12-29 18: 30: 57Z
  2. To prawda, ale :visible sprawdzi również, czy elementy macierzyste są widoczne, jak zauważył chiborg.
    2011-01-06 12: 30: 27Z
  3. Masz rację - wyjaśnię, że kod sprawdza tylko właściwość display. Biorąc pod uwagę, że pierwotne pytanie dotyczy show() i hide(), a ustawiono display, moja odpowiedź jest poprawna. Przy okazji działa z IE7, oto fragment kodu - jsfiddle.net/MWZss ;
    2011-01-14 16: 54: 41Z
  4. Właściwie stwierdziłem, że słowa logiki odwrotnej są lepsze:! $('selector'). is (': hidden'); z jakiegoś powodu. Warto spróbować.
    2012-01-05 15: 36: 15Z
  5. Oto proste testowanie porównawcze is () przeciwko regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Wniosek: jeśli jesteś poza wydajnością, użyj regexp over is () (ponieważ is () szuka najpierw wszystkich ukrytych węzłów, zanim spojrzysz na rzeczywisty element).
    2012-06-22 14: 12: 11Z

Jesteś okn użyj hidden selektora:

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

I visible selektor:

 
// Matches all elements that are visible
$('element:visible')
    
1382
2018-03-08 15: 38: 27Z
  1. po prostu uważaj, w tej prezentacji są pewne dobre wskazówki dotyczące wydajności: addyosmani.com/jqprovenperformance
    2011-07-11 17: 05: 57Z
  2. Na stronach 21 do 28 pokazuje, jak wolno: hidden lub: visible jest porównywane z innymi selektorami. Dzięki za wskazanie tego.
    2012-07-04 20: 12: 04Z
  3. Kiedy masz do czynienia z kilkoma elementami i bardzo niewiele się dzieje - tzn. ABSURDNIE NAJWYŻSZA WIELKOŚĆ PRZYPADKÓW - kwestia czasu jest śmiesznie drobnym problemem. Och nie! Zajęło to 42 ms zamiast 19 ms !!!
    2013-02-20 14: 56: 49Z
  4. Przełączam element sam za pomocą tego selektora. $('element: hidden') jest zawsze dla mnie prawdziwy!
    2013-08-09 07: 18: 33Z
  5. @ cwingrav Możesz chcieć ponownie przeczytać dokumentację: hidden dotyczy wszystkich elementów. Elementy formularza z type="hidden" to tylko jeden przypadek, który może wyzwolić: ukryty. Elementy bez wysokości i szerokości, elementy z display: none i elementy z ukrytymi przodkami również zostaną zakwalifikowane jako: ukryte.
    2016-01-15 04: 15: 16Z
 
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Powyższa metoda nie uwzględnia widoczności rodzica. Aby rozważyć również rodzica, powinieneś użyć .is(":hidden") lub .is(":visible").

Na przykład

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

Powyższa metoda uzna div2 za widoczny, a :visible nie. Ale powyższe może być użyteczne w wielu przypadkach, szczególnie gdy trzeba znaleźć, czy w ukrytym rodzicu jest jakiś błąd div, ponieważ w takich warunkach :visible nie będzie działać.

    
879
2018-08-02 06: 57: 48Z
  1. Sprawdza tylko właściwość wyświetlania pojedynczego elementu. Atrybut: visible sprawdza także widoczność elementów nadrzędnych.
    2010-03-03 10: 10: 48Z
  2. To jedyne rozwiązanie, które zadziałało dla mnie podczas testowania za pomocą IE 8.
    2012-01-13 18: 51: 41Z
  3. To nie jest rozwiązanie mojego problemu, ale metoda pomogła mi zidentyfikować poprawkę do sprawdzenia właściwości względem mojego problemu.
    2014-03-14 17: 37: 17Z
  4. @ chiborg Tak, ale czasami tego właśnie chcesz i musiałem się nauczyć, jak „sprytny” jQuery był…
    2014-03-14 17: 56: 14Z
  5. To odpowiada na pytanie, ponieważ pytanie dotyczy pojedynczego elementu i przy użyciu funkcji hide(), show() i toggle(), jednak, jak już większość mówi, powinniśmy użyj pseudoklas :visible i :hidden.
    2015-04-14 09: 18: 30Z

Żadna z tych odpowiedzi nie odpowiada na to, co rozumiem jako pytanie, czego szukałem, „Jak mogę obsługiwać elementy, które mają visibility: hidden?” . Neither :visible ani :hidden nie poradzą sobie z tym, ponieważ obaj szukają wyświetlania w dokumentacji. O ile mogłem określić, nie ma selektora do obsługi widoczności CSS. Oto jak to rozwiązałem (standardowe selektory jQuery, może być bardziej skondensowana składnia):

 
$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
    
497
2017-06-26 07: 12: 02Z
  1. Ta odpowiedź jest dobra do obsłużenia visibility dosłownie, ale pytanie było How you would test if an element has been hidden or shown using jQuery?. Używanie jQuery oznacza: właściwość display.
    2013-05-11 22: 37: 45Z
  2. Elementy o numerach visibility: hidden lub opacity: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie. Zobacz odpowiedź Pedro Rainho i dokumentacja jQuery na selektorze :visible.
    2013-10-16 09: 12: 04Z
  3. musisz przejść przez DOM, aby sprawdzić rodziców węzła, w przeciwnym razie jest to bezużyteczne.
    2014-04-22 19: 20: 11Z
  4. to nie zadziała, jeśli ukryjesz element za pomocą .hide ().
    2015-08-06 05: 51: 23Z

Od Jak określić stan przełączanego elementu?


Możesz określić, czy element jest zwinięty, czy nie, używając selektorów :visible i :hidden.

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

Jeśli po prostu działasz na elemencie w oparciu o jego widoczność, możesz po prostu uwzględnić :visible lub :hidden w wyrażeniu selektora. Na przykład:

 
 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
    
363
2016-01-12 14: 08: 58Z
  1. zastanawiając się, dlaczego żadna odpowiedź nie wspomina o przypadku, gdy element jest odsunięty od widocznego okna, jak top:-1000px ... Zgadnij, że jest to przypadek krawędziowy
    2017-05-08 09: 34: 11Z

Często podczas sprawdzania, czy coś jest widoczne lub nie, natychmiast pójdziesz do przodu i zrobisz coś innego. Łańcuch jQuery ułatwia to.

Jeśli więc masz selektor i chcesz wykonać na nim jakąś akcję tylko wtedy, gdy jest widoczna lub ukryta, możesz użyć filter(":visible") lub filter(":hidden"), a następnie połączyć ją z akcją, którą chcesz wykonać.

Tak więc zamiast instrukcji if:

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

Lub bardziej wydajny, ale nawet brzydszy:

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

Możesz to zrobić w jednym wierszu:

 
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
    
270
2015-04-27 20: 10: 05Z
  1. Nie ma powodu, aby wyodrębniać węzeł DOM we fragmencie użytym w przykładzie, a następnie ponownie go przeglądać. Lepiej po prostu zrobić: var $button = $('# btnUpdate'); A potem w wyrażeniach If używaj po prostu przycisku $zamiast $(przycisku). Ma tę zaletę, że buforuje obiekt jQuery.
    2012-04-21 22: 32: 30Z
  2. oto prosty przykład jquerypot.com/…
    2018-04-29 13: 28: 08Z

Selektor :visible zgodnydo dokumentacji jQuery :

  
  • Mają wartość CSS display none.
  •   
  • Są to elementy formularza z type="hidden".
  •   
  • Ich szerokość i wysokość są jawnie ustawione na 0.
  •   
  • Element przodka jest ukryty, więc element nie jest wyświetlany na stronie.
  •   

Elementy o numerach visibility: hidden lub opacity: 0 są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie.

Jest to przydatne w niektórych przypadkach i bezużyteczne w innych, ponieważ jeśli chcesz sprawdzić, czy element jest widoczny (display != none), ignorując widoczność rodziców, zauważysz, że wykonywanie .css("display") == 'none' jest nie tylko szybsze, ale także zwróci sprawdzanie poprawności poprawnie.

Jeśli chcesz sprawdzić widoczność zamiast wyświetlania, powinieneś użyć: .css("visibility") == "hidden".

Weź również pod uwagę dodatkowe notatki jQuery :

  

Ponieważ :visible jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, kwerendy używające :visible nie mogą wykorzystać zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll(). Aby uzyskać najlepszą wydajność przy użyciu :visible do zaznaczania elementów, najpierw wybierz elementy przy użyciu czystego selektora CSS, a następnie użyj .filter(":visible").

Ponadto, jeśli obawiasz się wydajności, powinieneś sprawdzić Teraz widzisz mnie ... pokaż /ukryj wydajność (2010-05-04). I użyj innych metod, aby pokazać i ukryć elementy.

    
223
2017-06-21 01: 41: 47Z

To działa dla mnie i używam show() i hide(), aby mój div był ukryty /widoczny:

 
if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
    
199
2015-12-14 21: 32: 03Z

Jak widoczność elementów i jQuery działa ;

Element można ukryć za pomocą display:none, visibility:hidden lub opacity:0. Różnica między tymi metodami:

  •  display:none ukrywa element i nie zajmuje miejsca;
  •  visibility:hidden ukrywa element, ale nadal zajmuje miejsce w układzie;
  • opacity:0 ukrywa element jako „widoczność: ukryta” i nadal zajmuje miejsce w układzie; jedyną różnicą jest to, że nieprzezroczystość pozwala na uczynienie elementu częściowo przezroczystym;

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

    Przydatne metody przełączania jQuery:

     
    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    
196
2017-07-30 22: 00: 31Z
  1. Inna różnica między visibility:hidden a opacity:0 polega na tym, że element będzie nadal odpowiadał na zdarzenia (takie jak kliknięcia) za pomocą opacity:0. Nauczyłem się tej sztuczki, tworząc własny przycisk do przesyłania plików.
    2012-06-29 18: 15: 21Z
  2. również jeśli ukryjesz dane wejściowe z kryciem: 0, nadal zostanie zaznaczone klawiszem tabulacji
    2017-12-12 11: 08: 36Z

Używałbym klasy CSS .hide { display: none!important; }.

Do ukrywania /pokazywania dzwonię pod numer .addClass("hide")/.removeClass("hide"). Do sprawdzania widoczności używam .hasClass("hide").

Jest to prosty i przejrzysty sposób sprawdzania /ukrywania /pokazywania elementów, jeśli nie planujesz używać metod .toggle() lub .animate().

    
152
2014-03-19 08: 15: 37Z
  1. .hasClass('hide') nie sprawdza, czy przodek rodzica jest ukryty (co również uniemożliwiłoby jego ukrycie). Prawdopodobnie działa to poprawnie, sprawdzając, czy .closest('.hide').length > 0, ale po co odkrywać koło?
    2012-09-25 23: 57: 15Z
  2. Proponowany wariant zwraca jeśli element jest widoczny w html, mój wariant zwraca jeśli element został bezpośrednio ukryty przez twój silnik kodu JavaScript /view. Jeśli wiesz, że elementy macierzyste nigdy nie powinny być ukryte - użyj .hasClass (), aby być bardziej rygorystycznym i zapobiec przyszłym błędom. Jeśli chcesz sprawdzić nie tylko widoczność, ale także ustawić stan elementu - użyj również .hasClass (). W innych przypadkach .closest () jest lepszy.
    2012-12-01 20: 27: 09Z
  3. Dlaczego po prostu nie używasz .is (": visible")?
    2018-10-16 09: 43: 43Z

Możesz to zrobić również używając zwykłego 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;
}

Uwagi:

  1. Działa wszędzie

  2. Działa dla zagnieżdżonych elementów

  3. Działa dla stylów CSS i wbudowanych

  4. Nie wymaga frameworka

148
2014-03-19 08: 15: 29Z
  1. Działa nieco inaczej niż w jQuery; uważa, że ​​visibility: hidden jest widoczny .
    2012-09-20 04: 45: 23Z
  2. Łatwo jest zmienić powyższy kod, aby naśladować (prawdopodobnie głupie) zachowanie jQuery. . . . . funkcja isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle i amp; o.currentStyle ["display"]! = „none”) {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode);}} return false;}
    2012-09-26 13: 57: 30Z
  3. Pewnie dodawałem to z korzyścią dla użytkowników, którzy korzystali z tego bez skanowania jego kodu. :)
    2012-09-26 21: 33: 20Z

Można po prostu użyć atrybutu hidden lub visible, takiego jak:

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

Możesz też uprościć to samo z jest w następujący sposób.

 
$(element).is(":visible")
    
126
2013-03-16 10: 04: 04Z

Link demo

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

Źródło:

Blogger Plug n Play - jQuery Tools and Widgets: Jak sprawdzić, czy Element jest ukryty lub Widoczny przy użyciu jQuery

    
122
2018-12-13 12: 15: 11Z
  1. @ Adrew, ale ten link pokazuje działający przykład tej funkcji. Myślę, że praktyczna odpowiedź może mieć wpływ na całą stronę tekstu :)
    2013-01-25 06: 30: 44Z
  2. @ jolly.exe, dopóki ten roboczy przykład nie zniknie.
    2013-10-10 21: 49: 17Z

ebdiv należy ustawić na style="display:none;". Działa zarówno dla show, jak i hide:

 
$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
    
118
2018-10-26 07: 33: 26Z

Inną odpowiedzią, którą powinieneś wziąć pod uwagę, jest ukrywanie elementu, powinieneś użyć jQuery , ale zamiast go ukrywać, usuwasz cały element, ale kopiujesz jego HTML zawartość a sam znacznik do zmiennej jQuery, a następnie wszystko, co musisz zrobić, to sprawdzić, czy na ekranie jest taki tag, używając normalnego if (!$('#thetagname').length).

    
114
2013-03-26 22: 12: 11Z

Podczas testowania elementu przeciwko selektorowi :hidden w jQuery należy wziąć pod uwagę, że element pozycjonowany bezwzględnie może być uznany za ukryty, chociaż jego elementy potomne są widoczne .

Na pierwszy rzut oka wydaje się to nieco sprzeczne z intuicją - chociaż bliższe zapoznanie się z dokumentacją jQuery dostarcza odpowiednich informacji:

  

Elementy można uznać za ukryte z kilku powodów: [...] Ich szerokość i wysokość są jawnie ustawione na 0. [...]

Więc to ma sens w odniesieniu do modelu pudełkowego i stylu obliczanego dla elementu. Nawet jeśli szerokość i wysokość nie są ustawione jawnie na 0, mogą być ustawione niejawnie .

Spójrz na następujący przykład:

 
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>

UPDATE FOR JQUERY 3.x:

Z jQuery 3 opisane zachowanie zmieni się! Elementy będą uważane za widoczne, jeśli mają jakieś pola układu, w tym pola o zerowej szerokości i /lub wysokości.

JSFiddle z jQuery 3.0.0-alpha1:

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

Ten sam JS będzie miał to wyjście:

 
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
    
89
2016-08-06 08: 53: 27Z

To może działać:

 
expect($("#message_div").css("display")).toBe("none");
    
84
2013-03-06 06: 41: 05Z
  1. Jaki jest język /dialekt /biblioteka? Nie znam tej składni w JS ...
    2012-09-25 23: 31: 33Z
  2. Wygląda na test jaśminu .
    2017-03-23 ​​00: 48: 31Z

Przykład:

 
$(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>
    
67
2017-07-16 13: 52: 00Z

Aby sprawdzić, czy nie jest widoczny, używam !:

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

Lub też jest to sam, zapisując selektor jQuery w zmiennej, aby uzyskać lepszą wydajność, gdy jest ona potrzebna wielokrotnie:

 
var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
    
63
2013-09-14 08: 01: 52Z
  1. Jak ustaliłeś, że zapisywanie selektora w zmiennej jest naprawdę szybsze?
    2013-06-20 21: 32: 30Z
  2. Cześć @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Możesz uruchomić test, w każdym razie miło jest mieć go w pamięci podręcznej, aby można było uzyskać do niego dostęp szybciej
    2013-06-21 06: 56: 50Z
  3. Jest to odpowiednie, jeśli chcesz użyć pojedynczej zmiennej przez cały proces zamiast dzwonić i wywoływać ten sam obiekt.
    2013-08-25 16: 57: 09Z

Użyj przełączania klas, a nie edycji stylu. . .

Używanie klas przeznaczonych do „ukrywania” elementów jest łatwe i jest jedną z najbardziej wydajnych metod. Przełączenie klasy „ukryte” w stylu „none” Display będzie działać szybciej niż edycja tego stylu bezpośrednio. Wyjaśniłem to dość dokładnie w pytaniu Stack Overflow Włączanie dwóch elementów widocznych /ukrytych w tym samym dziale .


Najlepsze praktyki i optymalizacja JavaScript

Oto prawdziwie pouczające wideo z Google Tech Talk autorstwa inżyniera Google, Nicholasa Zakasa:

60
2017-05-23 12: 10: 45Z

Przykład użycia widocznego czeku dla adblockera jest aktywny:

 
$(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” to identyfikator, który blokuje adblocker. Sprawdzanie, czy jest widoczne, pozwala wykryć, czy adblocker jest włączony.

    
58
2016-09-13 14: 07: 43Z

W końcu żaden z przykładów mi nie odpowiada, więc napisałem własne.

Testy (brak obsługi przeglądarki Internet Explorer filter:alpha):

a) Sprawdź, czy dokument nie jest ukryty

b) Sprawdź, czy element ma zerową szerokość /wysokość /krycie lub display:none/visibility:hidden w stylach wstawianych

c) Sprawdź, czy środek (także dlatego, że jest szybszy niż testowanie każdego piksela /rogu) elementu nie jest ukryty przez inny element (i wszystkich przodków, na przykład: overflow:hidden /przewiń /jeden element nad innym) lub krawędzie ekranu

d) Sprawdź, czy element ma zerową szerokość /wysokość /krycie lub display:none /widoczność: ukryty w stylach obliczonych (wśród wszystkich przodków)

Testowane na

Android 4.4 (Native browser /Chrome /Firefox), Firefox (Windows /Mac), Chrome (Windows /Mac), Opera (Windows Presto /Mac Webkit), Internet Explorer (tryby dokumentów Internet Explorer 5-11 + Internet Explorer 8 na maszynie wirtualnej), 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;
    }
})();

Jak korzystać:

 
is_visible(elem) // boolean
    
57
2014-04-28 18: 10: 50Z

Musisz sprawdzić zarówno ... Wyświetl jak i widoczność:

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

Jeśli sprawdzimy $(this).is(":visible"), jQuery sprawdza automatycznie obie rzeczy.

    
51
2014-07-19 15: 23: 42Z

Może możesz zrobić coś takiego

 
$(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>
    
39
2016-05-02 12: 59: 24Z

Po prostu sprawdź widoczność, sprawdzając wartość logiczną, na przykład:

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

Użyłem tego kodu dla każdej funkcji. W przeciwnym razie możesz użyć is(':visible') do sprawdzenia widoczności elementu.

    
34
2017-07-16 13: 56: 39Z

Ponieważ Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (jak opisano dla jQuery: visible Selector ) - możemy sprawdzić, czy element jest naprawdę widoczny w ten sposób:

 
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;
    }
});
    
33
2014-03-20 10: 32: 25Z

Ale co jeśli CSS elementu jest podobny do następującego?

 
.element{
    position: absolute;left:-9999;    
}

Więc ta odpowiedź na pytanie Przepełnienie stosu Jak sprawdzić, czy element jest poza ekranem powinien również należy rozważyć.

    
31
2017-05-23 11: 55: 02Z

Tu również trójskładnikowe wyrażenie warunkowe do sprawdzenia stanu elementu, a następnie do przełączenia go:

 
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
    
30
2013-11-05 23: 32: 02Z
  1. Lub, po prostu pozbądź się całego warunkowego i powiedz $('elementToToggle').toggle('slow'); ... :)
    2013-12-25 08: 53: 21Z
 
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
    
30
2013-12-07 13: 51: 23Z

Funkcję można utworzyć w celu sprawdzenia atrybutów widoczności /wyświetlania w celu sprawdzenia, czy element jest wyświetlany w interfejsie użytkownika, czy nie.

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

Skrzynka robocza

    
30
2014-11-22 11: 23: 57Z
źródło umieszczone tutaj