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

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?

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.

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')

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.

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

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');

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

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.

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   */
}

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

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

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.

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

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")

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

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

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).

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

Dies kann funktionieren:

expect($("#message_div").css("display")).toBe("none");

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>

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')
}

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:

• Beschleunigen Sie Ihr Javascript (YouTube)

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.

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

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.

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>

Ü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.

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

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

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

Daher sollte auch diese Antwort auf die Frage zum Stapelüberlauf berücksichtigt werden, wie überprüft werden kann, ob ein Element außerhalb des Bildschirms liegt .

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

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

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}