Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

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

Answer 1

.is(":not(':hidden')") /*if shown*/

Answer 2

if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

Answer 3

Ich habe danach gesucht, und keine der Antworten ist für meinen Fall korrekt, also habe ich eine Funktion erstellt, die false zurückgibt, wenn die Augen das Element nicht sehen können

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

Answer 4

Als hide() , show() et toggle() fügt dem Element Inline-CSS (display:none oder display:block) hinzu. In ähnlicher Weise können wir den ternären Operator verwenden, um zu prüfen, ob das Element verborgen oder sichtbar ist, indem wir display CSS prüfen.

UPDATE:

• Sie müssen auch prüfen, ob das Element mit CSS auf Sichtbarkeit eingestellt ist: "sichtbar" oder Sichtbarkeit: "versteckt"
• Das Element ist auch sichtbar, wenn die Eigenschaft display auf inline-block, block, flex eingestellt ist.

So können wir nach der Eigenschaft eines Elements suchen, die es unsichtbar macht. Sie sind also display: none et visibility: "hidden";

Wir können ein Objekt zur Überprüfung der Eigenschaft erstellen, die für das Ausblenden des Elements verantwortlich ist:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

Wir können überprüfen, indem wir in einer Schleife jeden Schlüsselwert im Objekt abgleichen, ob die Elementeigenschaft für den Schlüssel mit dem Wert der verborgenen Eigenschaft übereinstimmt.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

Wenn Sie Eigenschaften wie Elementhöhe: 0 oder Breite: 0 oder mehr überprüfen möchten, können Sie dieses Objekt erweitern und weitere Eigenschaften hinzufügen und überprüfen können.

Answer 5

Prüfen Sie einfach, ob das Element sichtbar und es wird ein boolean . jQuery versteckt die Elemente durch Hinzufügen von keine Anzeige auf das Element, wenn Sie also reines JavaScript verwenden wollen, können Sie das zum Beispiel immer noch tun:

if (document.getElementById("element").style.display === 'block') {
  // Your element is visible; do whatever you'd like
}

Sie können auch jQuery verwenden, da es scheint, dass der Rest Ihres Codes verwendet wird, und Sie haben kleinere Code-Block. Etwas wie das unten in jQuery tut den gleichen Trick für Sie:

if ($(element).is(":visible")) {
    // Your element is visible, do whatever you'd like
};

Auch die Verwendung des css Methode in jQuery kann zum gleichen Ergebnis führen:

if ($(element).css('display') === 'block') {
    // Your element is visible, do whatever you'd like
}

Auch bei der Überprüfung der Sichtbarkeit und Anzeige können Sie wie folgt vorgehen:

if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
   // Your element is visible, do whatever you'd like
}