javascript on when - Wie überprüfe ich, ob ein Element in jQuery verborgen ist?




15 Answers

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

// 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 , wird jedoch auf ein einzelnes Element angewendet. und es entspricht dem in den jQuery-FAQ empfohlenen Algorithmus

hidden js

Die Sichtbarkeit eines Elements kann mit den Funktionen .hide() , .show() oder .toggle() .

Wie würden Sie testen, ob ein Element sichtbar oder verborgen ist?




if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Bei der obigen Methode wird die Sichtbarkeit des übergeordneten Elements nicht berücksichtigt. Um auch das übergeordnete .is(":hidden") zu berücksichtigen, sollten Sie .is(":hidden") oder .is(":visible") .

Zum Beispiel,

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

Die obige Methode berücksichtigt div2 sichtbar, während :visible nicht. Obiges ist jedoch in vielen Fällen nützlich, vor allem, wenn Sie herausfinden müssen, ob im ausgeblendeten übergeordneten Element Fehler-Divs angezeigt werden, da in solchen Fällen :visible nicht funktioniert.




Von Wie bestimme ich den Zustand eines umgeschalteten Elements?

Sie können bestimmen, ob ein Element minimiert ist oder nicht, indem Sie die Selektoren :visible und :hidden .

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

Wenn Sie nur auf der Grundlage der Sichtbarkeit eines Elements agieren, können Sie Folgendes hinzufügen :visible oder :hidden in den Selektorausdruck. Zum Beispiel:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');



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

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

Elemente mit visibility: hidden oder opacity: 0 werden als sichtbar betrachtet, da sie im Layout noch Platz benötigen.

Dies ist in einigen Fällen nützlich und in anderen nicht sinnvoll. 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' ist nicht nur schneller, sondern gibt auch die Sichtbarkeitsprüfung korrekt zurück.

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

Beachten Sie auch die zusätzlichen jQuery-Hinweise :

Weil :visible eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit :visible die Leistungssteigerung nicht nutzen, die von der querySelectorAll() DOM-Methode querySelectorAll() bereitgestellt wird. Um die beste Leistung zu erzielen, verwenden Sie :visible , um Elemente auszuwählen. .filter(":visible") zunächst die Elemente mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter(":visible") .

Wenn Sie sich Sorgen um die Leistung machen, sollten Sie das Kontrollkästchen Jetzt sehen Sie mich… Leistung anzeigen / ausblenden (2010-05-04) anzeigen. Verwenden Sie andere Methoden, um Elemente ein- und auszublenden.




Funktionsweise der Elementsichtbarkeit und jQuery ;

Ein Element kann mit der display:none ausgeblendet werden display:none , visibility:hidden oder opacity:0 . Der Unterschied zwischen diesen Methoden:

  • display:none verbirgt das Element und nimmt keinen Platz ein.
  • visibility:hidden verbirgt das Element, beansprucht jedoch immer noch Platz im Layout;
  • opacity:0 verbirgt das Element als "Sichtbarkeit: ausgeblendet" und nimmt immer noch Platz im Layout ein. Der einzige Unterschied besteht darin, dass durch die Deckkraft ein Element teilweise transparent gemacht werden 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 geschachtelte Elemente

  3. Funktioniert für CSS und Inline-Stile

  4. Benötigt keinen Rahmen




Eine andere Antwort, die Sie in Betracht ziehen sollten, ist, wenn Sie ein Element jQuery , sollten Sie jQuery . Statt es wirklich zu verstecken, entfernen Sie das gesamte Element. Sie kopieren jedoch den HTML Inhalt und das Tag selbst in eine jQuery-Variable und dann Sie müssen nur testen, ob ein solches Tag auf dem Bildschirm angezeigt wird. Verwenden Sie dazu das normale if (!$('#thetagname').length) .




ebdiv sollte auf style="display:none;" . Es funktioniert sowohl für Anzeigen als auch für Ausblenden:

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



Das kann funktionieren:

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



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



Schließlich passt mir keines der Beispiele, also schrieb ich mein eigenes.

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

a) Prüfen Sie, ob das Dokument nicht ausgeblendet ist

b) Prüfen Sie, ob ein Element die Breite / Höhe / Deckkraft oder die display:none null hat display:none / visibility:hidden In Inline-Styles visibility:hidden

c) Prüfen Sie, ob das Zentrum (auch weil es schneller ist, jedes Pixel / jede Ecke zu testen) des Elements nicht durch ein anderes Element (und alle Vorfahren, z. B. overflow:hidden / scroll / ein Element über einem anderen Element) oder Bildschirmkanten overflow:hidden

d) Prüfen Sie, ob ein Element die Breite / Höhe / Deckkraft oder display:none Null hat display:none / Sichtbarkeit: in berechneten Stilen (unter allen Vorfahren) verborgen

Getestet am

Android 4.4 (Native Browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac-Webkit), Internet Explorer (Internet Explorer 5-11 Dokumentenmodi + Internet Explorer 8 auf einem virtuelle 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



Sie müssen sowohl die ... Anzeige als auch die Sichtbarkeit prü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 beide Dinge automatisch.




Weil Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (wie für jQuery: visible Selector beschrieben ) - wir können überprüfen, ob ein 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;
    }
});






Eine Funktion kann erstellt werden, um die Sichtbarkeits- / Anzeigeattribute zu prüfen, um 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




Related