webentwicklung-frage-antwort-db.com.de

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

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

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

javascriptjquerydomvisibility
7074
Philip Morton

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

Wie Twernt's Suggestion , jedoch auf ein einzelnes Element angewendet. und es entspricht dem in der jQuery FAQ empfohlenen Algorithmus }

8738
Tsvetomir Tsonev

Sie können den hidden -selektor verwenden:

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

Und der visible Selektor:

// Matches all elements that are visible
$('element:visible')
1339
twernt
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 Element zu berücksichtigen, sollten Sie .is(":hidden") oder .is(":visible") verwenden.

Zum Beispiel,

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

Die obige Methode berücksichtigt div2 als sichtbar, während :visible nicht. Das obige kann jedoch in vielen Fällen nützlich sein, insbesondere wenn Sie feststellen müssen, ob im ausgeblendeten übergeordneten Element Fehler divs angezeigt werden, da :visible unter solchen Bedingungen nicht funktioniert.

850
Mote

Keine dieser Antworten adressiert, was ich unter der Frage verstehe, wonach ich gesucht habe. "Wie gehe ich mit Elementen um, die visibility: hidden haben?" . Weder :visible noch :hidden werden damit umgehen, da beide in der Dokumentation nach Anzeige suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die CSS-Sichtbarkeit. So habe ich es gelöst (Standard-jQuery-Selektoren, möglicherweise eine etwas kompaktere Syntax):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
479
aaronLile

From Wie bestimme ich den Zustand eines umgeschalteten Elements?

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

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

Wenn Sie nur für ein Element basierend auf dessen Sichtbarkeit arbeiten, können Sie einfach :visible oder :hidden in den Selektorausdruck einschließen. Zum Beispiel:

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

Oft werden Sie beim Überprüfen, ob etwas sichtbar ist oder nicht, sofort fortfahren und etwas anderes damit tun. jQuery-Verkettung macht dies einfach.

Wenn Sie also einen Selektor haben und nur dann eine Aktion ausführen möchten, wenn diese sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") verwenden, gefolgt von der Verkettung der Aktion mit der gewünschten Aktion.

Also anstelle 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" });
259
Simon_Weaver

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

  • Sie haben einen CSS-Wert display von none.
  • Sie sind Formularelemente mit type="hidden".
  • Ihre Breite und Höhe sind explizit auf 0 gesetzt.
  • Ein Vorfahrenelement ist 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' 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-Notizen :

Da :visible eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit :visible die Leistungssteigerung nicht nutzen, die von der nativen DOM-Methode querySelectorAll() bereitgestellt wird. Um die beste Leistung zu erzielen, wenn Sie mit :visible Elemente auswählen, wählen Sie 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 JETZT SEHEN SIE ... LEISTUNG ANZEIGEN/AUSBLENDEN (2010-05-04) überprüfen. Verwenden Sie andere Methoden, um Elemente ein- und auszublenden.

211
Pedro Rainho

Dies funktioniert für mich und ich benutze show() und hide(), um mein Div sichtbar zu machen:

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

Funktionsweise von Elementsichtbarkeit und jQuery;

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

  • display:none verbirgt das Element und nimmt keinen Platz ein.
  • visibility:hidden verbirgt das Element, nimmt jedoch immer noch Platz im Layout ein.

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

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

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

Es ist eine einfache und übersichtliche Möglichkeit, Elemente zu überprüfen/auszublenden/anzuzeigen, wenn Sie keine .toggle()- oder .animate()-Methoden verwenden möchten.

146
Evgeny Levin

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 keinen Rahmen

141
Matt Brock

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

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

Oder Sie können das gleiche mit is wie folgt vereinfachen.

$(element).is(":visible")
122
ScoRpion

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

111
Code Spy

Eine andere Antwort, die Sie in Betracht ziehen sollten, ist, wenn Sie ein Element ausblenden, sollten Sie jQuery verwenden, aber anstatt es tatsächlich zu verbergen, entfernen Sie das gesamte Element, kopieren jedoch dessen HTML content und das Tag selbst in eine jQuery-Variable, und Sie müssen nur testen, ob ein solches Tag auf dem Bildschirm angezeigt wird, indem Sie die normale if (!$('#thetagname').length) verwenden.

110
think123

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

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

Beim Testen eines Elements gegen :hidden-Selektor in jQuery sollte berücksichtigt werden, dass ein absolut positioniertes Element als ausgeblendet erkannt werden kann, obwohl seine untergeordneten Elemente sichtbar sind.

Dies erscheint zunächst etwas kontrapunktisch - wenn Sie jedoch die jQuery-Dokumentation genauer betrachten, erhalten Sie die relevanten Informationen:

Elemente können aus verschiedenen Gründen als verborgen betrachtet werden: [...] Ihre Breite und Höhe sind explizit auf 0 gesetzt. [...]

Das macht also in Bezug auf das Box-Modell und den berechneten Stil des Elements einen Sinn. 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 FOR JQUERY 3.x:

Mit jQuery 3 ändert sich das beschriebene Verhalten! Elemente werden als sichtbar betrachtet, wenn sie über Layoutfelder verfügen, einschließlich der Breite und/oder Höhe Null.

JSFiddle mit jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Der gleiche JS wird dann diese Ausgabe haben:

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

Das kann funktionieren:

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

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>

63
Irfan DANISH

Um zu überprüfen, ob es nicht sichtbar ist, verwende 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')
}
62
Matthias Wegtun

Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung. . .

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist einfach und auch eine der effizientesten Methoden. Wenn Sie eine Klasse mit einem Display-Stil von "none" umschalten, ist die Bearbeitung schneller als die direkte Bearbeitung dieses Stils. Ich habe einige davon in der Stack Overflow-Frage Zwei Elemente sichtbar/verborgen im selben div ausführlich erklärt.

JavaScript Best Practices und Optimierung

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

59
Lopsided

Beispiel für die Verwendung von visible check for 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.

56
Roman Losev

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

Tests (keine Unterstützung von 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 display:nonevisibility:hidden in Inline-Styles hat

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, Beispiel: overflow:hidden/scroll/ein Element über einem anderen Element) oder Bildschirmkanten verborgen wird

d) Prüfen Sie, ob ein Element die Breite/Höhe/Deckkraft oder display:none/Sichtbarkeit Null hat: 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-Dokumentmodi + Internet) Explorer 8 auf einer virtuellen 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
55
Aleko

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.

50
Premshankar Tiwari

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>

38
Mathias Stavrou

Da 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 ist, können wir prüfen, ob das Element really auf diese Weise 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;
    }
});
32
Andron

Ü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') verwenden, um die Sichtbarkeit eines Elements zu überprüfen.

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

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

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

Also diese Antwort auf die Stack Overflow-Frage Wie zu prüfen, ob ein Element außerhalb des Bildschirms ist , sollte ebenfalls berücksichtigt werden.

30
RN Kushwaha

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

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

Arbeiten Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

Ich habe danach gesucht und keine der Antworten ist für meinen Fall richtig, also habe ich eine Funktion erstellt, die falsch ist, 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;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
18
Prabhagaran

So löst jQuery dieses Problem intern:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Wenn Sie jQuery nicht verwenden, können Sie diesen Code einfach nutzen und in eine eigene Funktion umwandeln:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Welche isVisible gibt true zurück, solange das Element sichtbar ist.

15
Oriol

Überprüfen Sie einfach, ob dieses Element visible ist, und es wird ein boolean , jQuery zurückgegeben. Blenden Sie die Elemente aus, indem Sie dem Element display none hinzufügen. Wenn Sie reines JavaScript verwenden möchten, können Sie dies trotzdem tun. zum Beispiel:

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

Sie können jQuery auch so verwenden, wie es für den Rest Ihres Codes der Fall ist, und Sie haben einen kleineren Codeblock, etwa wie unten in jQuery. Führen Sie dieselbe Spur für Sie durch:

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

Die Verwendung der css-Methode in jQuery kann dasselbe bewirken:

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

Wenn Sie die Sichtbarkeit und Anzeige überprüfen, können Sie Folgendes tun:

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

Es gibt mehrere Möglichkeiten, um zu prüfen, ob ein Element in jQuery sichtbar oder verborgen ist.

Demo-HTML als Beispielreferenz

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Sichtbarkeitsfilter verwenden $('element:hidden') oder $('element:visible')

  • $('element:hidden'): Wählt alle ausgeblendeten Elemente aus.

    Example:
   $('#content2:hidden').show();

  • $('element:visible'): Wählt alle sichtbaren Elemente aus.

    Example:
   $('#content:visible').css('color', '#EEE');

Weitere Informationen finden Sie unter http://api.jquery.com/category/selectors/visibility-filter-selectors/

Verwendung is() Filterung

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Lesen Sie mehr unter http://api.jquery.com/is/

14
Arun Karnawat

Wenn hide(), show() und toggle() Inline-css (display: none oder display: block) an element ..__ anfügen, können wir auf einfache Weise einen ternären Operator verwenden, um zu überprüfen, ob das Wetterelement ausgeblendet oder sichtbar ist.

UPDATE:

  • Sie müssen auch prüfen, ob für Element css die Sichtbarkeit festgelegt ist: "visible" oder Sichtbarkeit: "hidden".
  • Das Element ist auch sichtbar, wenn die Anzeigeeigenschaft auf Inline-Block, Block, Flex eingestellt ist.

So können wir die Eigenschaft eines Elements prüfen, das es unsichtbar macht. Sie sind also display: none und visibility: "hidden";

Wir können ein Objekt erstellen, um die Eigenschaft zu überprüfen, die für das Ausblenden des Elements verantwortlich ist:

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

Wir können durch Durchlaufen jedes Schlüsselwerts im Objektvergleich überprüfen, ob die Elementeigenschaft für den Schlüssel mit dem ausgeblendeten Eigenschaftswert ü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 prüfen möchten, können Sie dieses Objekt erweitern und weitere Eigenschaften hinzufügen und prüfen.

Vielen Dank @ Krzysztof Przygoda für die Erinnerung an andere Anzeigeeigenschaften.

14
No one

Sie können dies verwenden:

$(element).is(':visible');

Beispielcode

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

13
Abrar Jahin

Dies ist eine Option, um zu überprüfen, ob das Tag sichtbar ist oder nicht

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };

11
Sangeet Shah

Ich möchte nur das klären, in jQuery,

Elemente können aus verschiedenen Gründen als verborgen betrachtet werden:

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

Elemente mit Sichtbarkeit: verborgen oder Deckkraft: 0 werden als sichtbar betrachtet, da sie im Layout noch Platz benötigen. Bei Animationen, die ein Element verdecken, gilt das Element bis zum Ende der Animation als sichtbar.

Quelle: : versteckter Selektor | jQuery-API-Dokumentation

if($('.element').is(':hidden')) {
  // Do something
}
10
Sky Yip

Sie können einfach eine Klasse hinzufügen, wenn sie sichtbar ist. Fügen Sie eine Klasse hinzu, show. Dann prüfe, ob es eine Klasse gibt:

$('#elementId').hasClass('show');

Es gibt true zurück, wenn Sie die show-Klasse haben.

Fügen Sie CSS so hinzu:

.show{ display: block; }
9
Sahan

Es gibt zu viele Methoden, um nach versteckten Elementen zu suchen. Dies ist die beste Wahl (ich habe Sie gerade empfohlen):

Erstellen Sie mit jQuery ein Element in CSS für "hidden:".

Der Punkt ist:

$('element:visible')

Und ein Anwendungsbeispiel:

$('element:visible').show();
7
Abdul Aziz Al Basyir

Suchen Sie einfach nach dem Attribut display (oder visibility, je nachdem, welche Art von Unsichtbarkeit Sie bevorzugen). Beispiel:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

Du kannst den ... benutzen 

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

API-Dokumentation: https://api.jquery.com/visible-selector/

4
Wolfack

1 • jQuery-Lösung

Methoden, um festzustellen, ob ein Element in JQuery sichtbar ist

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Schleife auf allen visible div-Kindern des Elements von id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Ein Blick auf die Quelle von jQuery

So implementiert jQuery diese Funktion:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • So prüfen Sie, ob ein Element nicht auf dem Bildschirm angezeigt wird - CSS

Mit Element.getBoundingClientRect () können Sie leicht feststellen, ob sich Ihr Element innerhalb der Grenzen Ihres Ansichtsfensters befindet (d. H. Auf dem Bildschirm oder außerhalb des Bildschirms):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Sie können das auf verschiedene Weise verwenden:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Wenn Sie Angular verwenden, überprüfen Sie Folgendes: Kein verborgenes Attribut mit Angular verwenden

3
Lyes CHIOUKH

Wenn Sie überprüfen möchten, ob ein Element auf der Seite sichtbar ist, können Sie abhängig von der Sichtbarkeit des übergeordneten Elements überprüfen, ob width und height des Elements beide gleich 0.

jQuery

$element.width() === 0 && $element.height() === 0

Vanille

element.clientWidth === 0 && element.clientHeight === 0

Oder

element.offsetWidth === 0 && element.offsetHeight === 0

3
Profesor08
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

Sie können eine CSS-Klasse verwenden, wenn sie durch Umschalten der Klasse ein- oder ausgeblendet wird.

.show{ display :block; }

Stellen Sie Ihre jQuery toggleClass() oder addClass() oder removeClass(); ein.

Als Beispiel,

jQuery('#myID').toggleClass('show')

Der obige Code fügt die CSS-Klasse show hinzu, wenn das Element keine Klasse show hat, und entfernt sie, wenn es eine Klasse show hat.

Und wenn Sie überprüfen, ob es sichtbar ist oder nicht, können Sie diesen jQuery-Code folgen,

jQuery('#myID').hasClass('show');

Der obige Code gibt einen booleschen Wert (true) zurück, wenn das Element #myID Über unsere Klasse (show) verfügt, und false, wenn es nicht über die Klasse (show) verfügt.

1
Sahan

Sie können die Funktion jQuery is() verwenden, um das ausgewählte Element ein- oder auszublenden. 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 false.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
1
Aravinda Meewalaarachchi

Anstelle eines event für jeden einzelnen element schreiben Sie Folgendes:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Sie können es auch an den Eingängen verwenden:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

Versuchen

content.style.display != 'none'

function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('visible:', visible);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>
0
Kamil Kiełczewski

Du kannst das:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

jQuery-Lösung, recht alte Frage, aber trotzdem bin ich der Meinung, dass ich denen, die den Schaltflächentext ändern möchten, eine etwas bessere Antwort geben kann.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

Um ehrlich zu sein, hat die Frage diese Antwort bereits vor dem Datum. Ich füge hinzu, nicht das OP zu kritisieren, sondern jedem zu helfen, der diese Frage noch stellt.

Der richtige Weg, um festzustellen, ob etwas sichtbar ist, ist die Ansicht Ihres Ansichtsmodells. Wenn Sie nicht wissen, was das bedeutet, begeben Sie sich auf eine Entdeckungsreise, die Ihre Arbeit erheblich erschwert.

Hier ist eine Übersicht über das Modellansicht-Ansichtsmodell Architektur (MVVM).

KnockoutJS ist eine verbindliche Bibliothek, mit der Sie diese Dinge ausprobieren können, ohne ein komplettes Framework zu lernen.

Und hier sind einige JS und ein DIV, die sichtbar sein können oder nicht.

<html><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
  IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
  //get current visibility state for the div
  var x = IsDivVisible();
  //set it to the opposite
  IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body></html>

Beachten Sie, dass die Toggle-Funktion das DOM nicht zur Ermittlung der Sichtbarkeit des div befragt, sondern das Ansichtsmodell.

0
Peter Wone