javascript - when - js is element hidden




Wie überprüfe ich, ob ein Element in jQuery verborgen ist? (20)

Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung. . .

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist einfach und auch eine der effizientesten Methoden. Das Umschalten einer Klasse "verborgen" mit einem Display "Keine" führt zu einer schnelleren Bearbeitung als die direkte Bearbeitung dieses Stils. Ich habe einiges davon in der Stack Overflow-Frage ausführlich erklärt. Drehen von zwei Elementen im selben Div sichtbar / verborgen .

JavaScript Best Practices und Optimierung

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

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

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


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

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

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


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 Adblocker blockiert. Wenn Sie also prüfen, ob es sichtbar ist, können Sie feststellen, ob der Adblocker aktiviert ist.


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>


Das kann funktionieren:

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

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.


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


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


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

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

Zum Ausblenden / .addClass("hide")/.removeClass("hide") rufe ich .addClass("hide")/.removeClass("hide") . Um die Sichtbarkeit zu überprüfen, verwende ich .hasClass("hide") .

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


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

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

Oder Sie können das Gleiche wie folgt vereinfachen.

$(element).is(":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 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


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.


Vielleicht kannst du so etwas tun

$(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>


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

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

Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie oft sofort fortfahren und etwas anderes damit tun. jQuery-Verkettung macht dies einfach.

Wenn Sie also eine Auswahl haben und nur dann eine Aktion ausführen möchten, wenn sie sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") und diese mit der gewünschten Aktion verketten nehmen.

Also statt 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 machen:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

$('#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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Quelle:

Blogger-Plug-in-Play - jQuery-Tools und Widgets: So können Sie mit jQuery sehen, ob ein Element ausgeblendet oder sichtbar ist

jsFiddle:

JSFiddle - ipsjolly - k4WWj


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.







visibility