Czy można przełączyć widoczność elementu, za pomocą funkcji .hide(), .show() lub .toggle()?

Jak testowałbyś, jeśli element jest visible lub hidden?

8016
Philip Morton 7 październik 2008, 17:03

26 odpowiedzi

Najlepsza odpowiedź

Ponieważ pytanie odnosi się do jednego 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 Dwert, ale zastosowany do jednego elementu; i to pasuje do algorytmu zalecanego w zadaniu jQuery

Używamy jQuery (), aby sprawdzić wybrany element za pomocą innego elementu, selektora lub dowolnego obiektu jQuery. Ta metoda przemierza wzdłuż elementów DOM, aby znaleźć dopasowanie, które spełniają przepływowy parametr. Powróci true, jeśli jest mecz w inny sposób zwraca false.

9675
Peter Mortensen 6 maj 2020, 13:38

Wystarczy sprawdzić widoczność, sprawdzając wartość boolowską, jak:

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.

40
dippas 16 lipiec 2017, 13:56

Ponieważ Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (jak opisano dla jQuery: selektor widoczny) - możemy sprawdzić, czy element jest Naprawdę widoczne 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;
    }
});
38
Andron 20 marzec 2014, 10:32

Ale co, jeśli CSS Element jest podobny?

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

Więc Ta odpowiedź na stosowanie przepełnienia stosu Jak sprawdzić, czy należy również rozważyć element Element Element .

36
Community 23 maj 2017, 11:55

Można utworzyć funkcję, aby sprawdzić atrybuty widoczności / wyświetlania w celu oceny, czy element jest pokazany w interfejsie użytkownika, czy nie.

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

Working Fiddle

34
Peter Mortensen 22 listopad 2014, 11:23

Oto thernary Condition Expression, aby sprawdzić stan elementu, a następnie przełączyć go:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
33
cssimsek 5 listopad 2013, 23:32
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
32
dcodesmith 7 grudzień 2013, 13:51

Możesz użyć hidden selektor:

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

Oraz visible selektor:

// Matches all elements that are visible
$('element:visible')
1518
twernt 8 marzec 2018, 15:38
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Powyższa metoda nie uwzględnia widoczności rodzica. Aby rozważyć 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 rozważy div2 widoczna podczas :visible nie. Ale powyższe może być przydatne w wielu przypadkach, zwłaszcza gdy trzeba znaleźć, jeśli w ukrytym rodzica widoczna jest jakikolwiek błąd, ponieważ w takich warunkach :visible nie będzie działać.

994
Peter Mortensen 6 maj 2020, 13:39

Żadna z tych odpowiedzi nie dotyczy tego, co rozumiem, że jesteś pytaniem, na czym szukałem, "Jak radzę sobie z przedmiotami, które mają visibility: hidden?" . Ani :visible ani :hidden zajmą się tym, ponieważ oboje poszukuje wyświetlania na dokumentację. O ile mogłem ustalić, nie ma selektora do obsługi widoczności CSS. Oto jak rozwiązałem go (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
    }
});
553
Andrii Abramov 26 czerwiec 2017, 07:12

Z Jak określić stan przełączny element?


Możesz określić, czy element jest zawalony lub nie za pomocą selektorów :visible i :hidden.

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

Jeśli po prostu działasz na element na podstawie jego widoczności, możesz po prostu zawierać :visible lub :hidden w wyrażeniu wyboru. Na przykład:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
408
Chris 12 styczeń 2016, 14:08

Często podczas sprawdzania, czy coś jest widoczne, czy nie, natychmiast pójdziesz do przodu i zrób coś innego. Łatwo jest łańcucha jQuery.

Więc jeśli masz selektor i chcesz wykonać pewne działanie tylko wtedy, gdy jest widoczne lub ukryte, możesz użyć filter(":visible") lub filter(":hidden"), a następnie łagodząc go z akcją, którą chcesz wziąć.

Więc zamiast if oświadczenie, takie jak:

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ć wszystko w jednej linii:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
307
ecarrizo 27 kwiecień 2015, 20:10

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
224
webvitaly 14 grudzień 2015, 21:32

Możesz 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 na zagnieżdżone elementy

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

  4. Nie wymaga ram

171
Lucas 19 marzec 2014, 08:15

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

Do ukrycia / pokazywania, nazywam .addClass("hide")/.removeClass("hide"). Do sprawdzania widoczności, używam .hasClass("hide").

Jest to prosty i jasny sposób, aby sprawdzić / ukryć / pokazać elementy, jeśli nie planujesz użyć metod .animate() lub .animate().

170
Lucas 19 marzec 2014, 08:15

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

Źródło:

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

146
Adder 27 sierpień 2019, 07:08

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

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

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

$(element).is(":visible")
141
Peter Mortensen 16 marzec 2013, 10:04

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
139
Community 26 październik 2018, 07:33

Kolejna odpowiedź, którą powinieneś uwzględnić, jest to, że ukrywanie elementu, powinieneś użyć jQuery, ale Zamiast go ukrywać, usuwasz cały element, ale skopiujesz jego HTML zawartość i tag Sam w zmiennej jQuery, a następnie wszystko, co musisz zrobić, jest test, jeśli na ekranie jest taki znacznik, używając normalnego if (!$('#thetagname').length).

126
Lucas 26 marzec 2013, 22:12

Podczas testowania elementu przeciwko :hidden selektor w jQuery należy uznać, że Absolutny element umieszczony może być rozpoznany jako ukryty, chociaż ich elementy dziecka są widoczne .

Wydaje się, że w pierwszej kolejności nieco intuicyjne - choć mając bliższe spojrzenie na dokumentację jQuery, podaje odpowiednie informacje:

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

W rzeczywistości ma to sens w odniesieniu do modelu pudełka i stylu obliczeniowego dla elementu. Nawet jeśli szerokość i wysokość nie są ustawione jawnie do 0, mogą być ustawione domyślnie .

Spójrz na poniższy 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:

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

JSFiddle z jQuery 3.0.0-alfa1:

http://jsfiddle.net/pm2q3/7/

Ta sama JS będzie wtedy miała to wyjście:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
107
Peter Mortensen 6 maj 2020, 13:45

To może zadziałać:

expect($("#message_div").css("display")).toBe("none");
94
Lucas 6 marzec 2013, 06:41

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>
78
dippas 16 lipiec 2017, 13:52

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

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

Albo następujący jest również SAM, zapisując selektor jQuery w zmiennej, aby mieć lepszą wydajność, gdy potrzebujesz go wiele razy:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
70
Peter Mortensen 14 wrzesień 2013, 08:01

Przykład używania widoczny Check for Adblocker 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 bloków adblocker. Więc sprawdzanie tego, jeśli jest widoczne, możesz wykryć, czy adblocker jest włączony.

62
Cameron 13 wrzesień 2016, 14:07

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

Testy (Brak wsparcia programu Internet Explorer filter:alpha):

A) Sprawdź, czy dokument nie jest ukryty

B) Sprawdź, czy element ma szerokość / wysokość / krycie lub display:none / visibility:hidden w stylu inline

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, przykład: overflow:hidden / scroll / jeden element na enother) lub krawędzie ekranowe

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

Przetestowano

Android 4.4 (Native Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 Tryby dokumentów + 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 używać:

is_visible(elem) // boolean
62
Peter Mortensen 6 maj 2020, 13:44

Musisz sprawdzić zarówno ... Wyświetlacz jak również widoczność:

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

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

54
Peter Mortensen 19 lipiec 2014, 15:23