Ist es möglich, die Sichtbarkeit eines Elements mit den Funktionen .hide(), .show() oder .toggle() umzuschalten?

Wie würden Sie testen, ob ein Element visible oder hidden ist?

8271
Philip Morton 7 Okt. 2008 im 17:03

28 Antworten

Beste Antwort

Da sich die Frage auf ein einzelnes Element bezieht, ist dieser Code möglicherweise besser geeignet:

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

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

Entspricht dem Vorschlag von twernt, aber auf ein einzelnes Element angewendet; und entspricht dem in den jQuery-FAQ empfohlenen Algorithmus

Wir verwenden jQuery is (), um das ausgewählte Element mit einem anderen Element, Selektor oder einem beliebigen jQuery-Objekt zu überprüfen. Diese Methode durchläuft die DOM-Elemente, um eine Übereinstimmung zu finden, die den übergebenen Parameter erfüllt. Es wird true zurückgegeben, wenn eine Übereinstimmung vorliegt, andernfalls wird false zurückgegeben.

9316
Ravi Makwana 11 Okt. 2019 im 04:19

Eine andere Antwort, die Sie berücksichtigen sollten, ist, wenn Sie ein Element ausblenden, sollten Sie jQuery verwenden, aber Anstatt es tatsächlich auszublenden, entfernen Sie das gesamte Element, kopieren jedoch den HTML -Inhalt und das Tag selbst in eine jQuery-Variable, und dann müssen Sie nur noch mit dem normalen if (!$('#thetagname').length) testen, ob ein solches Tag auf dem Bildschirm angezeigt wird.

119
Lucas 26 März 2013 im 22:12

Vielleicht kannst du so etwas machen

$(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>
41
Abrar Jahin 2 Mai 2016 im 12:59

Demo-Link

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

Quelle:

Blogger Plug n Play - jQuery-Tools und -Widgets: So stellen Sie mithilfe von jQuery fest, ob das Element ausgeblendet oder sichtbar ist

138
Adder 27 Aug. 2019 im 07:08

Schließlich passt keines der Beispiele zu mir, also habe ich mein eigenes geschrieben.

Tests (keine Unterstützung von Internet Explorer filter:alpha):

A) Überprüfen Sie, ob das Dokument nicht ausgeblendet ist

B) Überprüfen Sie, ob ein Element in Inline-Stilen die Breite / Höhe / Deckkraft Null oder display:none / visibility:hidden hat

C) Überprüfen Sie, ob die Mitte (auch weil sie schneller ist als das Testen jedes Pixels / jeder Ecke) des Elements nicht von einem anderen Element (und allen Vorfahren, Beispiel: overflow:hidden / scroll / one element over enother) oder Bildschirmkanten ausgeblendet wird

D) Überprüfen Sie, ob ein Element eine Breite / Höhe / Deckkraft von Null oder display:none / Sichtbarkeit aufweist: versteckt in berechneten Stilen (unter allen Vorfahren)

Getestet am

Android 4.4 (nativer Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Internet Explorer 5-11 Dokumentmodi + Internet Explorer 8 auf einer virtuellen Maschine), 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;
    }
})();

Wie benutzt man:

is_visible(elem) // boolean
58
Peter Mortensen 28 Apr. 2014 im 18:10

Hier ist auch ein ternärer bedingter Ausdruck, um den Status des Elements zu überprüfen und dann umzuschalten:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
30
cssimsek 5 Nov. 2013 im 23:32

Beispiel:

$(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>
75
dippas 16 Juli 2017 im 13:52

Ich würde die CSS-Klasse .hide { display: none!important; } verwenden.

Zum Verstecken / Anzeigen rufe ich .addClass("hide")/.removeClass("hide") auf. Zur Überprüfung der Sichtbarkeit verwende ich .hasClass("hide").

Es ist eine einfache und übersichtliche Möglichkeit, Elemente zu überprüfen / auszublenden / anzuzeigen, wenn Sie nicht vorhaben, die Methoden .toggle() oder .animate() zu verwenden.

161
Lucas 19 März 2014 im 08:15

Sie müssen sowohl ... Anzeige als auch Sichtbarkeit überprüfen:

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

Wenn wir nach $(this).is(":visible") suchen, sucht jQuery automatisch nach beiden Dingen.

51
Peter Mortensen 19 Juli 2014 im 15:23

Da Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (wie unter jQuery: sichtbarer Selektor beschrieben) - können wir überprüfen, ob das Element ist wirklich auf diese Weise sichtbar:

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;
    }
});
34
Andron 20 März 2014 im 10:32

Von Wie bestimme ich den Status eines umgeschalteten Elements?


Mit den Selektoren :visible und :hidden können Sie feststellen, ob ein Element reduziert ist oder nicht.

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

Wenn Sie einfach auf ein Element basierend auf seiner Sichtbarkeit einwirken, können Sie einfach :visible oder :hidden in den Selektorausdruck aufnehmen. Beispielsweise:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
387
Chris 12 Jän. 2016 im 14:08

Keine dieser Antworten befasst sich mit der Frage, nach der ich gesucht habe: "Wie gehe ich mit Elementen mit visibility: hidden um?" . Weder :visible noch :hidden werden dies behandeln, da beide nach einer Anzeige gemäß der Dokumentation suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die CSS-Sichtbarkeit. Hier ist, wie ich es gelöst habe (Standard-jQuery-Selektoren, möglicherweise gibt es eine komprimiertere Syntax):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
522
Andrii Abramov 26 Juni 2017 im 07:12

Beim Testen eines Elements gegen den :hidden - Selektor in jQuery sollte berücksichtigt werden, dass ein absolut positioniertes Element möglicherweise als ausgeblendet erkannt wird, obwohl seine untergeordneten Elemente sichtbar sind .

Dies scheint in erster Linie etwas kontraintuitiv zu sein - ein genauerer Blick auf die jQuery-Dokumentation liefert jedoch die relevanten Informationen:

Elemente können aus mehreren Gründen als verborgen betrachtet werden: [...] Ihre Breite und Höhe werden explizit auf 0 gesetzt. [...]

Dies ist also tatsächlich sinnvoll in Bezug auf das Box-Modell und den berechneten Stil für das Element. Auch wenn Breite und Höhe explizit nicht auf 0 gesetzt sind, können sie implizit gesetzt werden.

Schauen Sie sich das folgende Beispiel an:

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 FÜR JQUERY 3.x:

Mit jQuery 3 ändert sich das beschriebene Verhalten! Elemente werden als sichtbar betrachtet, wenn sie Layoutfelder haben, einschließlich solcher mit einer Breite und / oder Höhe von Null.

JSFiddle mit jQuery 3.0.0-alpha1:

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

Das gleiche JS wird dann diese Ausgabe haben:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
98
Al Foиce ѫ 6 Aug. 2016 im 08:53
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Die obige Methode berücksichtigt nicht die Sichtbarkeit des übergeordneten Elements. Um auch das übergeordnete Element zu berücksichtigen, sollten Sie .is(":hidden") oder .is(":visible") verwenden.

Beispielsweise,

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

Die obige Methode betrachtet div2 als sichtbar, während :visible nicht sichtbar ist. Dies kann jedoch in vielen Fällen hilfreich sein, insbesondere wenn Sie feststellen müssen, ob im versteckten übergeordneten Element Fehlerdivs sichtbar sind, da :visible unter solchen Bedingungen nicht funktioniert.

935
Shadow 2 Aug. 2018 im 06:57

Um zu überprüfen, ob es nicht sichtbar ist, verwende ich !:

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

Oder das Folgende ist auch das Sam, das den jQuery-Selektor in einer Variablen speichert, um eine bessere Leistung zu erzielen, wenn Sie ihn mehrmals benötigen:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
67
Peter Mortensen 14 Sept. 2013 im 08:01

Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie häufig sofort weitermachen und etwas anderes damit tun. Die jQuery-Verkettung macht dies einfach.

Wenn Sie also einen Selektor haben und nur dann eine Aktion ausführen möchten, wenn dieser sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") verwenden und ihn anschließend mit der gewünschten Aktion verketten.

Anstelle einer if Anweisung wie folgt:

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

Oder effizienter, aber noch hässlicher:

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

Sie können alles in einer Zeile erledigen:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
290
ecarrizo 27 Apr. 2015 im 20:10

Beispiel für die Verwendung der sichtbaren Prüfung für Adblocker ist aktiviert:

$(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" ist eine ID, die der Adblocker blockiert. Wenn Sie also überprüfen, ob es sichtbar ist, können Sie feststellen, ob der Adblocker aktiviert ist.

60
Cameron 13 Sept. 2016 im 14:07

Es kann eine Funktion erstellt werden, um die Sichtbarkeits- / Anzeigeattribute zu überprüfen und festzustellen, ob das Element in der Benutzeroberfläche angezeigt wird oder nicht.

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

Geige arbeiten

30
Peter Mortensen 22 Nov. 2014 im 11:23

Dies funktioniert für mich und ich verwende show() und hide(), um mein Div versteckt / sichtbar zu machen:

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

Sie können dies auch mit einfachem JavaScript tun:

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

Anmerkungen:

  1. Funktioniert überall

  2. Funktioniert für verschachtelte Elemente

  3. Funktioniert für CSS- und Inline-Stile

  4. Benötigt kein Framework

160
Lucas 19 März 2014 im 08:15

ebdiv sollte auf style="display:none;" gesetzt sein. Es funktioniert sowohl zum Ein- als auch zum Ausblenden:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
131
Community 26 Okt. 2018 im 07:33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
dcodesmith 7 Dez. 2013 im 13:51

Überprüfen Sie einfach die Sichtbarkeit, indem Sie nach einem booleschen Wert suchen, wie z.

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

Ich habe diesen Code für jede Funktion verwendet. Andernfalls können Sie mit is(':visible') die Sichtbarkeit eines Elements überprüfen.

37
dippas 16 Juli 2017 im 13:56

Sie können den hidden Selektor verwenden:

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

Und der visible Selektor:

// Matches all elements that are visible
$('element:visible')
1444
twernt 8 März 2018 im 15:38

Was aber, wenn das CSS des Elements wie folgt aussieht?

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

Diese Antwort auf die Frage zum Stapelüberlauf Wie sollte überprüft werden, ob ein Element außerhalb des Bildschirms ist, sollte ebenfalls berücksichtigt werden .

32
Community 23 Mai 2017 im 11:55

Dies kann funktionieren:

expect($("#message_div").css("display")).toBe("none");
89
Lucas 6 März 2013 im 06:41

Der :visible Selektor gemäß der jQuery-Dokumentation:

  • Sie haben einen CSS display -Wert von none.
  • Sie sind Formularelemente mit type="hidden".
  • Ihre Breite und Höhe werden explizit auf 0 gesetzt.
  • Ein Vorfahrenelement ist ausgeblendet, sodass das Element nicht auf der Seite angezeigt wird.

Elemente mit visibility: hidden oder opacity: 0 gelten als sichtbar, da sie noch Platz im Layout beanspruchen.

Dies ist in einigen Fällen nützlich und in anderen nutzlos. Wenn Sie überprüfen möchten, ob das Element sichtbar ist (display != none), und die Sichtbarkeit der Eltern ignorieren, werden Sie feststellen, dass .css("display") == 'none' nicht nur schneller ausgeführt wird. wird aber auch die Sichtbarkeitsprüfung korrekt zurückgeben.

Wenn Sie die Sichtbarkeit anstelle der Anzeige überprüfen möchten, sollten Sie Folgendes verwenden: .css("visibility") == "hidden".

Berücksichtigen Sie auch die zusätzlichen jQuery-Hinweise:

Da :visible eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit :visible die Leistungssteigerung der nativen DOM querySelectorAll() -Methode nicht nutzen. Um die beste Leistung bei der Auswahl von Elementen mit :visible zu erzielen, wählen Sie die Elemente zuerst mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter(":visible").

Wenn Sie sich Sorgen über die Leistung machen, sollten Sie auch Jetzt siehst du mich ... Leistung ein- / ausblenden (04.05.2010). Verwenden Sie andere Methoden, um Elemente anzuzeigen und auszublenden.

240
Pang 21 Juni 2017 im 01:41

Man kann einfach das Attribut hidden oder visible verwenden, wie:

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

Oder Sie können dasselbe mit is wie folgt vereinfachen.

$(element).is(":visible")
134
Peter Mortensen 16 März 2013 im 10:04