Jak sprawdzić, czy element jest ukryty w jQuery?

7736

Czy to możliwe, aby przełączyć widoczność elementu, używając funkcji .hide(), .show()lub .toggle()?

Jak sprawdziłbyś, czy elementem jest visiblelub hidden?

Philip Morton
źródło
49
Warto wspomnieć (nawet po całym tym czasie), że $(element).is(":visible")działa dla jQuery 1.4.4, ale nie dla jQuery 1.3.2, w Internet & nbsp; Explorer & nbsp; 8 . Można to przetestować za pomocą pomocnego fragmentu testowego Tsvetomira Tsoneva . Pamiętaj tylko, aby zmienić wersję jQuery, aby przetestować pod każdym z nich.
Reuben
2
Jest to powiązane, choć inne pytanie: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Odpowiedzi:

9393

Ponieważ pytanie dotyczy pojedynczego elementu, ten kod może być bardziej odpowiedni:

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

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

Jest to to samo, co sugestia twernta , ale dotyczy tylko jednego elementu; i odpowiada algorytmowi zalecanemu w FAQ jQuery .

Używamy jQuery's is (), aby sprawdzić wybrany element za pomocą innego elementu, selektora lub dowolnego obiektu jQuery. Ta metoda przechodzi wzdłuż elementów DOM, aby znaleźć dopasowanie, które spełnia przekazany parametr. Zwróci true, jeśli istnieje dopasowanie, w przeciwnym razie zwróci false.

Tsvetomir Tsonev
źródło
164
To rozwiązanie wydaje się sprzyjać konfuzji visible=falsei display:none; mając na uwadze, że rozwiązanie Mote wyraźnie zniechęca programistów zamierzających sprawdzić display:none; (poprzez wzmiankę o ukryciu i pokazaniu, których kontroli display:nonenie ma visible=true)
kralco626,
93
To prawda, ale :visiblesprawdzi również, czy elementy nadrzędne są widoczne, jak zauważył Chiborg.
Tsvetomir Tsonev
45
Masz rację - wyjaśnię, że kod sprawdza tylko displaywłaściwość. Biorąc pod uwagę, że pierwotne pytanie dotyczy show()i hide(), i ustalili display, moja odpowiedź jest poprawna. Przy okazji działa z IE7, oto fragment testowy - jsfiddle.net/MWZss ;
Tsvetomir Tsonev
53
Odkryłem, że słowa logiki odwrotnej są lepsze:! $ ('Selektor'). Is (': hidden'); z jakiegoś powodu. Warte spróbowania.
Kzqai
21
Oto proste testowanie porównawcze jest () względem wyrażenia regularnego : jsperf.com/jquery-is-vs-regexp-for-css-visibility . Wniosek: jeśli zależy Ci na wydajności, użyj wyrażenia regularnego over is () (ponieważ is () najpierw szuka wszystkich ukrytych węzłów, zanim spojrzy na rzeczywisty element).
Max Leske
1457

Możesz użyć hiddenselektora:

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

I visibleselektor:

// Matches all elements that are visible
$('element:visible')
twernt
źródło
67
uważaj, w tej prezentacji jest kilka dobrych wskazówek dotyczących wydajności: addyosmani.com/jqprovenperformance
codecraig
27
Na stronach od 21 do 28 pokazano, jak powolny: ukryty lub: widoczny w porównaniu z innymi selektorami. Dzięki za wskazanie tego.
Etienne Dupuis
109
Kiedy masz do czynienia z kilkoma elementami, a dzieje się bardzo mało - tj. NAJWYŻSZA SZALUNKA WIĘKSZA SPRAWA - kwestia czasu jest absurdalnie niewielka. Och nie! Zajęło 42 ms zamiast 19 ms !!!
vbullinger
16
Używam tego selektora do ręcznego przełączania elementu. $ („element: ukryty”) jest dla mnie zawsze prawdziwe!
ZoomIn
15
@cwingrav Możesz ponownie przeczytać dokumentację: ukryty dotyczy wszystkich elementów. Elementy formularza z type="hidden"to tylko jeden przypadek, który może wywołać: ukryty. Elementy bez wysokości i szerokości, elementy zi display: noneelementy z ukrytymi przodkami również będą się kwalifikować jako: ukryte.
Joshua Walsh
948
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

Powyższa metoda nie uwzględnia widoczności elementu nadrzędnego. Aby wziąć pod uwagę również rodzica, należy 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 będzie uważana za div2widoczną, podczas gdy :visiblenie będzie. Ale powyższe może być przydatne w wielu przypadkach, szczególnie gdy musisz sprawdzić, czy w ukrytym rodzicu są widoczne div div błędów, ponieważ w takich warunkach :visiblenie będą działać.

Pyłek
źródło
131
To sprawdza tylko właściwość display pojedynczego elementu. Atrybut: visible sprawdza również widoczność elementów nadrzędnych.
chiborg,
16
To jedyne rozwiązanie, które zadziałało dla mnie podczas testowania w IE 8.
evanmcd
20
@chiborg Tak, ale czasami tego właśnie chcesz i musiałem nauczyć się na własnej skórze, jak „sprytne” jQuery było ...
Casey
9
To jest odpowiedź na pytanie, czym jest pytanie o jednym elemencie i za pomocą hide(), show()i toggle()funkcje, jednak, jak większość z nich już zostało powiedziane, powinniśmy używać :visiblei :hiddenpseudo-klas.
Jimmy Knoot
2
Tej odpowiedzi można użyć, gdy element istnieje, ale nie znajduje się obecnie na stronie, na przykład po detach ().
atheaos
526

Żadna z tych odpowiedzi nie dotyczy pytania, które rozumiem jako tego, czego szukałem: „Jak radzić sobie z przedmiotami, które mają visibility: hidden?” . Ani to, :visibleani :hiddennie poradzi sobie z tym, ponieważ oboje szukają wyświetlania według dokumentacji. O ile mogłem ustalić, 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
    }
});
aaronLile
źródło
18
Ta odpowiedź jest dobra na visibilitydosłowne odpowiedzi, ale pytanie brzmiało How you would test if an element has been hidden or shown using jQuery?. Korzystanie z jQuery oznacza: displaywłaściwość.
MarioDS
10
Elementy z visibility: hiddenlub opacity: 0są uważane za widoczne, ponieważ nadal zajmują miejsce w układzie. Zobacz odpowiedź Pedro Rainho i dokumentację jQuery dotyczącą :visibleselektora.
awe
9
musisz przejść w górę DOM, aby sprawdzić rodziców węzła, w przeciwnym razie jest to bezużyteczne.
vsync
389

Od Jak ustalić stan przełączanego elementu?


Możesz określić, czy element jest zwinięty, czy nie, używając selektorów :visiblei :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ć :visiblelub :hiddenw wyrażeniu selektora. Na przykład:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
użytkownik574889
źródło
4
zastanawiam się, dlaczego żadna odpowiedź nie wspomina o przypadku, w którym element jest odsunięty od widocznego okna, na przykład top:-1000px... Zgadnij, że to przypadek
jazzcat
294

Często sprawdzając, czy coś jest widoczne, czy nie, natychmiast pójdziesz do przodu i zrobisz z tym coś innego. Łańcuch jQuery ułatwia to.

Więc jeśli masz selektor i chcesz wykonać na nim jakąś akcję, tylko jeśli jest widoczny lub ukryty, możesz użyć filter(":visible")lub filter(":hidden")po nim połączyć go łańcuchem z akcją, którą chcesz podjąć.

Zamiast ifoświadczenia, tak:

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

Lub bardziej wydajny, ale jeszcze brzydszy:

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

Możesz to wszystko zrobić w jednym wierszu:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Simon_Weaver
źródło
25
Nie ma powodu, aby wyodrębniać węzeł DOM we fragmencie użytym w tym przykładzie, a następnie trzeba go ponownie sprawdzić. Lepiej to zrobić: var $ button = $ ('# btnUpdate'); A następnie w wyrażeniach If wystarczy użyć przycisku $ zamiast $ (przycisk). Ma tę zaletę, że buforuje obiekt jQuery.
LocalPCGuy
1
oto prosty przykład jquerypot.com/…
Ketan Savaliya
241

:visibleSelektor według dokumentacji jQuery :

  • Mają displaywartość CSS wynoszącą none.
  • Są elementami formularza z type="hidden".
  • Ich szerokość i wysokość są jawnie ustawione na 0.
  • Element nadrzędny jest ukryty, więc element nie jest wyświetlany na stronie.

Elementy z visibility: hiddenlub opacity: 0są 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, przekonasz się, że działanie .css("display") == 'none'jest nie tylko szybsze, ale również poprawnie zwróci kontrolę widoczności.

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

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

Ponieważ :visiblejest to rozszerzenie jQuery, a nie część specyfikacji CSS, używane zapytania :visiblenie mogą skorzystać ze zwiększenia wydajności zapewnianego przez natywną querySelectorAll()metodę DOM . Aby osiągnąć najlepszą wydajność podczas :visiblewybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter(":visible").

Ponadto, jeśli martwisz się wydajnością, powinieneś sprawdzić Teraz widzisz mnie… pokaż / ukryj wydajność (2010-05-04). I użyj innych metod do pokazywania i ukrywania elementów.

Pedro Rainho
źródło
213

Działa to dla mnie, a ja używam show()i hide()aby ukryć / widoczność mojego diva:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
Abiy
źródło
212

Jak działa widoczność elementu i jQuery ;

Element może być ukryte z display:none, visibility:hiddenlub 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:0ukrywa element jako „widoczność: ukryty” i nadal zajmuje miejsce w układzie; jedyną różnicą jest to, że nieprzezroczystość pozwala uczynić element 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();
    });
webvitaly
źródło
20
Kolejna różnica między visibility:hiddeni opacity:0polega na tym, że element nadal reaguje na zdarzenia (np. Kliknięcia) za pomocą opacity:0. Nauczyłem się tej sztuczki, tworząc niestandardowy przycisk do przesyłania plików.
urraka
1
także jeśli ukryjesz dane z nieprzezroczystością: 0, nadal jest wybierane za pomocą klawisza tab
YangombiUmpakati,
160

Możesz to również zrobić za pomocą 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 elementów zagnieżdżonych

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

  4. Nie wymaga ram

Matt Brock
źródło
6
Działa nieco inaczej niż jQuery; uważa visibility: hiddenza widoczne .
alex
4
Ł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 && 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;}
Matt Brock
3
Jasne, właśnie dodałem to z korzyścią dla użytkowników, którzy używali tego bez skanowania jego kodu. :)
alex
160

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

Dzwonię do ukrywania / pokazywania .addClass("hide")/.removeClass("hide"). Używam do sprawdzania widoczności .hasClass("hide").

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

Evgeny Levin
źródło
11
.hasClass('hide')nie sprawdza, czy przodek rodzica jest ukryty (co też by go ukryło). Możliwe, że to sprawdzi się poprawnie, sprawdzając, czy .closest('.hide').length > 0, ale po co wymyślać koło ponownie?
nbrooks
1
Wariant, który proponujesz, zwraca, jeśli element jest widoczny w html, mój wariant zwraca, jeśli element został bezpośrednio ukryty przez kod JavaScript / silnik przeglądania. Jeśli wiesz, że elementy nadrzędne nigdy nie powinny być ukryte - użyj .hasClass (), aby być bardziej surowym i zapobiegać przyszłym błędom. Jeśli chcesz sprawdzić nie tylko widoczność, ale także ustawić stan elementu - użyj .hasClass (). W innych przypadkach lepsza jest funkcja .closest ().
Evgeny Levin,
1
Dlaczego po prostu nie używasz .is („: visible”)?
dont_trust_me
137

Link demonstracyjny

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Źródło:

Blogger Plug n Play - Narzędzia i widżety jQuery: jak sprawdzić, czy element jest ukryty lub widoczny za pomocą jQuery

Code Spy
źródło
1
@Adrew, ale ten link pokazuje działający przykład tej funkcji. Myślę, że praktyczna odpowiedź może przeważyć całą stronę tekstu :)
Code Spy
133

Można po prostu użyć atrybutu hiddenlub visible, na przykład:

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

Czy można uprościć samo z Is następująco.

$(element).is(":visible")
Skorpion
źródło
130

ebdivpowinien być ustawiony na style="display:none;". Działa zarówno w przypadku pokazu, jak i ukrywania:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
Vaishu
źródło
118

Inną odpowiedzią, którą należy wziąć pod uwagę, jest to, że jeśli ukrywasz element, powinieneś użyć jQuery , ale zamiast go ukrywać, usuwasz cały element, ale kopiujesz jego zawartość HTML i sam tag 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).

Lucas
źródło
99

Podczas testowania elementu względem :hiddenselektora w jQuery należy wziąć pod uwagę, że element pozycjonowany absolutnie może zostać rozpoznany jako ukryty, chociaż jego elementy potomne są widoczne .

Wydaje się to przede wszystkim nieco sprzeczne z intuicją - choć dokładne przyjrzenie się dokumentacji jQuery daje istotne informacje:

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

Ma to więc sens w odniesieniu do modelu pudełkowego i obliczonego stylu elementu. Nawet jeśli szerokość i wysokość nie są jawnie ustawione na 0, mogą być ustawione domyślnie .

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>


Aktualizacja dla jQuery 3.x:

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

JSFiddle z jQuery 3.0.0-alpha1:

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

Ten sam kod JavaScript będzie miał następujące dane wyjściowe:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
źródło
89

Może to działać:

expect($("#message_div").css("display")).toBe("none");
Maneesh Kumar
źródło
7
Co to za język / dialekt / biblioteka? Nie znam tej składni w JS ...
nbrooks
74

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>

Irfan DUŃSKI
źródło
66

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

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

Lub poniżej znajduje się również sam, zapisując selektor jQuery w zmiennej, aby uzyskać lepszą wydajność, gdy jest potrzebna wiele razy:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
Matthias Wegtun
źródło
1
Jak ustaliłeś, że zapisanie selektora w zmiennej jest naprawdę szybsze?
Ilia Rostovtsev,
3
Cześć @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Tam 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 szybszy dostęp
Matthias Wegtun
2
Jest to odpowiednie, jeśli chcesz użyć jednej zmiennej w całym procesie zamiast wywoływać i wywoływać ten sam obiekt.
Kenneth Palaganas,
60

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

Korzystanie z klas przeznaczonych do „ukrywania” elementów jest łatwe, a także jedną z najbardziej wydajnych metod. Przełączanie klasy „ukrytej” ze Displaystylem „none” będzie działać szybciej niż bezpośrednia edycja tego stylu. Wyjaśniłem niektóre z tego dość dokładnie w pytaniu Przepełnienie stosu Przekształcanie dwóch elementów widocznych / ukrytych w tym samym div .


JavaScript Najlepsze praktyki i optymalizacja

Oto naprawdę pouczające wideo z Google Tech Talk przez inżyniera Google, Nicholasa Zakasa:

Przechylony
źródło
60

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

$(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. Więc sprawdzając, czy jest widoczny, możesz wykryć, czy adblocker jest włączony.

Roman Losev
źródło
58

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

Testy (brak obsługi Internet Explorera)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 wbudowanych

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 / scroll / jeden element nad innym) lub krawędzie ekranu

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

Testowane na

Android 4.4 (natywna przeglądarka / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (tryby dokumentów 5-11 Internet Explorer + Internet Explorer 8 na maszyna wirtualna) i 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 używać:

is_visible(elem) // boolean
Aleko
źródło
50

Musisz sprawdzić zarówno ... Wyświetlanie, 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 automatycznie sprawdza obie rzeczy.

Premshankar Tiwari
źródło
41

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>

Mathias Stavrou
źródło
37

Wystarczy sprawdzić widoczność, sprawdzając wartość logiczną, np .:

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.

pixellabme
źródło
34

Ponieważ Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(jak opisano w 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;
    }
});
Andron
źródło
30

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

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

Working Fiddle

V31
źródło
29

Oto także trójkowe wyrażenie warunkowe, które sprawdza stan elementu, a następnie przełącza go:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
cssimsek
źródło
4
Albo po prostu pozbądź się całego warunkowego i powiedz $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gauraw
źródło