Wie überprüfe ich, ob ein Element in jQuery versteckt ist?

7740

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

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

Philip Morton
quelle
49
Es ist erwähnenswert (auch nach all dieser Zeit), dass dies $(element).is(":visible")für jQuery 1.4.4 funktioniert, nicht jedoch für jQuery 1.3.2 unter Internet Explorer 8 . Dies kann mit Tsvetomir Tsonevs hilfreichem Test-Snippet getestet werden . Denken Sie daran, die Version von jQuery zu ändern, um sie unter jeder Version zu testen.
Reuben
2
Dies ist verwandt, obwohl eine andere Frage: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Antworten:

9396

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

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

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

Es ist dasselbe wie der Vorschlag von twernt , wird jedoch auf ein einzelnes Element angewendet. und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus .

Wir verwenden jQuery's 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.

Tsvetomir Tsonev
quelle
164
Diese Lösung scheint die Verwirrung von visible=falseund zu fördern display:none; in der Erwägung, dass die Lösung von Mote die Absicht der Programmierer, die zu überprüfen, eindeutig verleumdet display:none; (durch Erwähnung von verstecken und zeigen, welche Kontrolle display:nonenicht visible=true)
kralco626
93
Das ist richtig, :visibleprüft aber auch, ob die übergeordneten Elemente sichtbar sind, wie Chiborg hervorhob.
Tsvetomir Tsonev
45
Sie haben einen Punkt - ich werde klarstellen, dass der Code nur für die displayEigenschaft prüft . Angesichts der Tatsache, dass die ursprüngliche Frage für show()und hide()ist und sie gesetzt sind display, ist meine Antwort richtig. Übrigens funktioniert es mit IE7, hier ist ein Test-Snippet - jsfiddle.net/MWZss ;
Tsvetomir Tsonev
53
Ich fand tatsächlich, dass die umgekehrten logischen Wörter besser sind :! $ ('Selector'). Is (': hidden'); aus irgendeinem Grund. Einen Versuch wert.
Kzqai
21
Hier ist ein einfacher Benchmark-Test () gegen Regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Fazit: Wenn Sie keine Leistung erbringen möchten, verwenden Sie regexp over is () (da is () zuerst nach allen versteckten Knoten sucht, bevor Sie sich das eigentliche Element ansehen).
Max Leske
1457

Sie können den hiddenSelektor verwenden:

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

Und der visibleSelektor:

// Matches all elements that are visible
$('element:visible')
twernt
quelle
67
Seien
Sie
27
Auf den Seiten 21 bis 28 wird gezeigt, wie langsam: versteckt oder sichtbar im Vergleich zu anderen Selektoren ist. Vielen Dank für den Hinweis.
Etienne Dupuis
109
Wenn Sie sich mit ein paar Elementen beschäftigen und sehr wenig los ist - dh DIE ABSURD VAST MEHRHEIT DER FÄLLE -, ist das Zeitproblem ein lächerlich kleines Problem. Oh nein! Es dauerte 42 ms statt 19 ms !!!
Vbullinger
16
Ich schalte das Element mit diesem Selektor um. $ ('element: hidden') gilt immer für mich!
ZoomIn
15
@cwingrav Möglicherweise möchten Sie die Dokumentation erneut lesen .: hidden gilt für alle Elemente. Formularelemente mit type="hidden"ist nur ein Fall, der ausgelöst werden kann: versteckt. Elemente ohne Höhe und Breite, Elemente mit display: noneund Elemente mit versteckten Vorfahren gelten auch als: versteckt.
Joshua Walsh
948
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 die Eltern zu berücksichtigen, sollten Sie .is(":hidden")oder verwenden .is(":visible").

Zum Beispiel,

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

Die obige Methode wird als div2sichtbar betrachtet, wenn dies :visiblenicht der Fall ist . In vielen Fällen kann dies jedoch hilfreich sein, insbesondere wenn Sie feststellen müssen, ob im ausgeblendeten übergeordneten Element Fehlerdivs sichtbar sind, da diese unter solchen Bedingungen :visiblenicht funktionieren.

Mote
quelle
131
Dies prüft nur die Anzeigeeigenschaft eines einzelnen Elements. Das Attribut: visible überprüft auch die Sichtbarkeit der übergeordneten Elemente.
Chiborg
16
Dies ist die einzige Lösung, die für mich beim Testen mit IE 8
funktioniert hat
20
@chiborg Ja, aber manchmal ist es das, was du willst und ich musste auf die harte Tour lernen, wie "clever" jQuery war ...
Casey
9
Dies macht die Frage beantworten, die Frage ist , über ein einzelnes Element ist und durch die Verwendung hide(), show()und toggle()Funktionen, aber, wie die meisten haben bereits gesagt, sollten wir die Verwendung :visibleund :hiddenPseudo-Klassen.
Jimmy Knoot
2
Diese Antwort kann verwendet werden, wenn ein Element vorhanden ist, sich aber derzeit nicht auf der Seite befindet, z. B. nach remove ().
Atheaos
526

Keine dieser Antworten befasst sich mit dem, was ich als die Frage verstehe, nach der ich gesucht habe: "Wie gehe ich mit Gegenständen um, die haben visibility: hidden?" . Weder :visiblenoch :hiddenwird dies behandelt, 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
    }
});
aaronLile
quelle
18
Diese Antwort ist visibilitybuchstäblich gut zu handhaben , aber die Frage war How you would test if an element has been hidden or shown using jQuery?. Die Verwendung von jQuery bedeutet: die displayEigenschaft.
MarioDS
10
Elemente mit visibility: hiddenoder opacity: 0gelten als sichtbar, da sie im Layout noch Platz beanspruchen. Siehe Antwort von Pedro Rainho und jQuery-Dokumentation auf dem :visibleSelektor.
Ehrfurcht
9
Sie müssen das DOM durchlaufen, um die Eltern des Knotens zu überprüfen. Andernfalls ist dies nutzlos.
vsync
389

Aus Wie bestimme ich den Status eines umgeschalteten Elements?


Mit den Selektoren :visibleund können Sie bestimmen, ob ein Element reduziert ist oder nicht :hidden.

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

Wenn Sie sich einfach auf ein Element wirkt , auf der Grundlage seiner Sicht, können Sie einfach schließen :visibleoder :hiddenin der Auswahl Ausdruck. Zum Beispiel:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user574889
quelle
4
Ich frage mich, warum keine Antwort den Fall erwähnt, wenn das Element vom sichtbaren Fenster top:-1000px
wegbewegt wird
294

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 ihn verwenden filter(":visible")oder filter(":hidden")anschließend mit der gewünschten Aktion verketten.

Also anstelle einer ifAussage wie dieser:

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" });
Simon_Weaver
quelle
25
Kein Grund, den DOM-Knoten in dem im Beispiel verwendeten Snippet zu extrahieren und ihn dann erneut nachzuschlagen. Besser einfach machen: var $ button = $ ('# btnUpdate'); Und dann verwenden Sie in den If-Ausdrücken einfach die Schaltfläche $ anstelle von $ (Schaltfläche). Hat den Vorteil, dass das jQuery-Objekt zwischengespeichert wird.
LocalPCGuy
1
Hier ist ein einfaches Beispiel jquerypot.com/…
Ketan Savaliya
242

Der :visibleSelektor gemäß der jQuery-Dokumentation :

  • Sie haben einen CSS- displayWert von none.
  • Sie sind Formelemente 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: hiddenoder opacity: 0gelten als sichtbar, da sie im Layout noch Platz beanspruchen.

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

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 :visiblees sich um eine jQuery-Erweiterung handelt, die nicht Teil der CSS-Spezifikation ist, können Abfragen mit :visiblenicht die Leistungssteigerung nutzen, die durch die native DOM- querySelectorAll()Methode bereitgestellt wird . Um die beste Leistung bei :visibleder Auswahl von Elementen zu erzielen , wählen Sie die Elemente zuerst mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter(":visible").

Wenn Sie sich Sorgen um die Leistung machen, sollten Sie Folgendes überprüfen: Jetzt sehen Sie mich… Leistung ein- / ausblenden (04.05.2010). Verwenden Sie andere Methoden, um Elemente anzuzeigen und auszublenden.

Pedro Rainho
quelle
214

Dies funktioniert für mich und ich benutze show()und hide()mache mein Div versteckt / sichtbar:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
Abiy
quelle
213

Funktionsweise von Elementsichtbarkeit und jQuery ;

Ein Element kann mit oder ausgeblendet display:nonewerden . Der Unterschied zwischen diesen Methoden:visibility:hiddenopacity:0

  • display:none verbirgt das Element und nimmt keinen Platz ein;
  • visibility:hidden verbirgt das Element, nimmt aber dennoch Platz im Layout ein;
  • opacity:0verbirgt das Element als "Sichtbarkeit: versteckt" und nimmt dennoch Platz im Layout ein; Der einzige Unterschied besteht darin, dass man durch die Deckkraft ein Element teilweise transparent machen kann.

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

    Nützliche jQuery-Umschaltmethoden:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
Webvitaly
quelle
20
Ein weiterer Unterschied zwischen visibility:hiddenund opacity:0besteht darin, dass das Element weiterhin auf Ereignisse (wie Klicks) mit reagiert opacity:0. Ich habe diesen Trick gelernt, indem ich eine benutzerdefinierte Schaltfläche für das Hochladen von Dateien erstellt habe.
Urraka
1
Auch wenn Sie Eingaben mit Deckkraft: 0 ausblenden, wird sie immer noch mit der Tabulatortaste ausgewählt
YangombiUmpakati
161

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

Matt Brock
quelle
6
Funktioniert etwas anders als bei jQuery; es gilt visibility: hiddenals sichtbar .
Alex
4
Es ist einfach genug, den obigen Code zu ändern, um das (wohl dumme) jQuery-Verhalten nachzuahmen. . . . . Funktion 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
Klar, ich habe das nur zum Nutzen der Benutzer hinzugefügt, die dies verwendet haben, ohne den Code zu scannen. :)
Alex
160

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

Zum Verstecken rufe ich an .addClass("hide")/.removeClass("hide"). 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 keine Methoden .toggle()oder .animate()Methoden verwenden möchten.

Evgeny Levin
quelle
11
.hasClass('hide')prüft nicht, ob ein Vorfahr des Elternteils ausgeblendet ist (wodurch es auch ausgeblendet würde). Sie könnten dies möglicherweise richtig funktionieren lassen, indem Sie prüfen, ob .closest('.hide').length > 0, aber warum das Rad neu erfinden?
Nbrooks
1
Die von Ihnen vorgeschlagene Variante gibt zurück, wenn das Element in HTML sichtbar ist. Meine Variante gibt zurück, wenn das Element direkt von Ihrer Javascript-Code- / Ansichts-Engine ausgeblendet wurde. Wenn Sie wissen, dass übergeordnete Elemente niemals ausgeblendet werden sollten, verwenden Sie .hasClass (), um strenger zu sein und zukünftige Fehler zu vermeiden. Wenn Sie nicht nur die Sichtbarkeit, sondern auch den eingestellten Elementstatus überprüfen möchten, verwenden Sie auch .hasClass (). In anderen Fällen ist .closest () besser.
Evgeny Levin
1
Warum verwenden Sie nicht einfach .is (": sichtbar")?
dont_trust_me
138

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 sehen Sie mithilfe von jQuery, ob das Element ausgeblendet oder sichtbar ist

Code Spy
quelle
1
@Adrew, aber dieser Link zeigt ein funktionierendes Beispiel für diese Funktion. Ich denke, eine praktische Antwort kann eine ganze Textseite übersteigen :)
Code Spy
133

Man kann einfach das Attribut hiddenoder verwenden visible, wie:

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

Oder Sie können das gleiche mit vereinfachen heißt wie folgt.

$(element).is(":visible")
Skorpion
quelle
130

ebdivsollte auf eingestellt werden style="display:none;". Es funktioniert sowohl zum Ein- als auch zum Ausblenden:

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

Eine andere Antwort, die Sie in Betracht ziehen 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 Alles, was Sie tun müssen, ist zu testen, ob ein solches Tag auf dem Bildschirm angezeigt wird if (!$('#thetagname').length).

Lucas
quelle
100

Beim Testen eines Elements gegen den :hiddenSelektor 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 nicht explizit 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/

Der gleiche JavaScript-Code hat dann folgende Ausgabe:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
quelle
90

Dies kann funktionieren:

expect($("#message_div").css("display")).toBe("none");
Maneesh Kumar
quelle
7
Welche Sprache / Dialekt / Bibliothek ist das? Ich bin nicht mit dieser Syntax in JS vertraut ...
Nbrooks
74

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>

Irfan DÄNISCH
quelle
66

Um zu überprüfen, ob es nicht sichtbar ist, benutze 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')
}
Matthias Wegtun
quelle
1
Wie haben Sie festgestellt, dass das Speichern eines Selektors in einer Variablen wirklich schneller ist?
Ilia Rostovtsev
3
Hallo @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Dort können Sie den Test ausführen. Wie auch immer, es ist schön, es zwischengespeichert zu haben, damit schneller darauf zugegriffen werden kann
Matthias Wegtun
2
Dies ist geeignet, wenn Sie während des gesamten Prozesses eine einzelne Variable verwenden möchten, anstatt dasselbe Objekt aufzurufen und aufzurufen.
Kenneth Palaganas
60

Verwenden Sie das Umschalten von Klassen und nicht die Stilbearbeitung. . .

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist einfach und auch eine der effizientesten Methoden. Das Umschalten einer 'versteckten' Klasse mit dem DisplayStil 'Keine' ist schneller als das direkte Bearbeiten dieses Stils. Ich habe einige davon ziemlich gründlich in der Frage zum Stapelüberlauf erklärt. Zwei Elemente im selben Div sichtbar / versteckt machen .


Best Practices und Optimierung für JavaScript

Hier ist ein wirklich aufschlussreiches Video eines Google Tech Talk von Google-Front-End-Ingenieur Nicholas Zakas:

Schief
quelle
60

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.

Roman Losev
quelle
58

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 eine Breite / Höhe / Deckkraft von Null oder display:none/ visibility:hiddenin Inline-Stilen aufweist

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) ausgeblendet wird. Beispiel: overflow:hidden / scroll / ein Element über ein anderes) oder Bildschirmkanten ausgeblendet wird

d) Überprüfen Sie, ob ein Element eine Breite / Höhe / Deckkraft oder display:noneSichtbarkeit von Null hat : 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 einem virtuelle Maschine) und 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
Aleko
quelle
50

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, prüft jQuery automatisch nach beiden Dingen.

Premshankar Tiwari
quelle
41

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>

Mathias Stavrou
quelle
37

Ü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 is(':visible')die Sichtbarkeit eines Elements überprüfen.

pixellabme
quelle
34

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

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
quelle
30

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

V31
quelle
29

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'); });
cssimsek
quelle
4
Oder, weißt du, einfach die gesamte Bedingung loswerden und sagen $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gaurav
quelle