54 Soru: Bir öğenin jQuery'de gizli olup olmadığını nasıl kontrol ederim?

tarafından oluşturulan soru Sun, Oct 30, 2016 12:00 AM

.hide(), .show() veya .toggle() işlevlerini kullanarak bir öğenin görünürlüğünü değiştirmek mümkündür.

Bir öğenin görünür veya gizli olup olmadığını nasıl test edersiniz?

    
7282
  1. $(element).is(":visible")'un jQuery 1.4.4 için çalıştığı, ancak aQreery 1.3.2 için İnternet &Explorer; Explorer & nbsp; 8 . Bu, Tsvetomir Tsonev'in yararlı test snippet'i kullanılarak test edilebilir . Her birinin altında test etmek için jQuery'nin sürümünü değiştirmeyi unutmayın.
    2011-02-01 03: 57: 34Z
  2. Farklı bir soruya rağmen, bununla ilgilidir: stackoverflow.com/questions/17425543/…
    2016-03-22 19: 20: 54Z
  3. Gizli tanımınız nedir?
    2018-05-19 07: 29: 38Z
30 Yanıtlar                              30                         

Soru tek bir öğeye atıfta bulunduğundan bu kod daha uygun olabilir:

 
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

twernt’in önerisiyle aynı /a>, ancak tek bir elemana uygulanır; ve jQuery SSS’inde önerilen algoritmaya uyuyor

    
8935
2018-07-02 15: 50: 46Z
  1. Bu çözüm visible=false ve display:none'un karışıklığını teşvik ediyor gibi görünüyor; Mote’un çözümü, kodlayıcıların display:none’u kontrol etme niyetini açıkça kötülediğini; (hangi kontrolün display:none'u visible=true değil :visible'da gösterdiği gizlenerek belirtiniz)
    2010-12-29 18: 30: 57Z
  2. Doğru, ancak display, ana öğelerin görünür olup olmadığını kontrol eder, chiborg'un da belirttiği gibi.
    2011-01-06 12: 30: 27Z
  3. Bir noktanız var - Kodun yalnızca show() özelliği denetlediğini açıkça belirtirim. Asıl sorunun hide() ve display için olduğu ve hidden belirledikleri için cevabım doğru. Bu arada IE7 ile de çalışır, işte bir test pasajı - jsfiddle.net/MWZss ;
    2011-01-14 16: 54: 41Z
  4. Aslında ters mantık kelimelerinin daha iyi olduğunu buldum:! $('selector'). is (': hidden'); bazı sebeplerden dolayı. Denemeye değer.
    2012-01-05 15: 36: 15Z
  5. İşte basit bir kıyaslama testi: () regexp'e karşı: ( jsperf.com/jquery-is-vs-regexp-for-css-visibility . Sonuç: Eğer performansın dışındaysanız, regexp over kullanın () (çünkü (çünkü () asıl öğeye bakmadan önce tüm gizli düğümleri arar).
    2012-06-22 14: 12: 11Z
1382
2018-03-08 15: 38: 27Z
  1. sadece dikkatli olun, bu sunumda performansla ilgili bazı ipuçları var: addyosmani.com/jqprovenperformance
    2011-07-11 17: 05: 57Z
  2. 21-28. sayfalarda ne kadar yavaş: gizli veya: görülebilir, diğer seçicilerle karşılaştırılır. Bunu işaret ettiğiniz için teşekkür ederiz.
    2012-07-04 20: 12: 04Z
  3. Birkaç elementle uğraşıyorsanız ve çok az şey oluyorsa - yani, OLAYLARIN KESİNLİKLE BÜYÜK AMAÇLIĞI - zaman meselesi gülünç derecede küçük bir sorundur. Oh, hayır! 19 ms yerine 42 msn sürdü !!!
    2013-02-20 14: 56: 49Z
  4. Bu seçiciyi kullanarak öğeyi mamul olarak değiştiriyorum. $('element: hidden') benim için her zaman doğrudur!
    2013-08-09 07: 18: 33Z
  5. @ cwingrav Dokümanları yeniden okumak isteyebilirsiniz,: gizli tüm öğeler için geçerlidir. display: none'a sahip form öğeleri, tetikleyebilecek yalnızca bir durumdur: gizli. Yüksekliği ve genişliği olmayan elemanlar,
    if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
        // element is hidden
    }
    
    'lu elemanlar ve gizli atalı elemanlar ayrıca şu şekilde nitelenir: gizli.
    2016-01-15 04: 15: 16Z
 .is(":hidden")

Yukarıdaki yöntem ebeveynin görünürlüğünü dikkate almaz. Ebeveynleri de dikkate almak için .is(":visible") veya

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>
kullanmalısınız.

Örneğin,

 div2
  

Yukarıdaki yöntem :visible'u görünürken :visible'u göz önünde bulundurur. Ancak yukarıdakiler, çoğu durumda, özellikle de gizli ebeveynde görünen herhangi bir hata divinin olup olmadığını bulmanız gerektiğinde yararlı olabilir, çünkü bu gibi durumlarda, hide() çalışmayacaktır.

    
879
2018-08-02 06: 57: 48Z
  1. Bu, yalnızca tek bir öğenin display özelliğini kontrol eder. : Visible özelliği aynı zamanda ana öğelerin görünürlüğünü de denetler.
    2010-03-03 10: 10: 48Z
  2. IE 8 ile test ederken benim için çalışan tek çözüm bu.
    2012-01-13 18: 51: 41Z
  3. Bu, sorunumun çözümü değil, ancak yöntem, bir özellik için sorunumu kontrol etmek için bir düzeltme belirlememe yardımcı oldu.
    2014-03-14 17: 37: 17Z
  4. @ chiborg Evet, ama bazen istediğin şey budur ve jQuery'nin ne kadar "zeki" olduğunu zor yoldan öğrenmek zorunda kaldım ...
    2014-03-14 17: 56: 14Z
  5. Bu, soruyu tek bir unsurla ilgili olan ve show(), toggle() ve :visible işlevlerini kullanarak soruyu yanıtlar, ancak çoğu kişinin söylediği gibi :hidden ve visibility: hidden sözde sınıflarını kullanın.
    2015-04-14 09: 18: 30Z

Bu yanıtların hiçbiri soru olarak ne anladığımı, ne aradığımı değil, ":visible olan öğeleri nasıl kullanırım?" . Ne :hidden ne de

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
, her ikisi de belgelere göre ekran aradıklarından dolayı bunun üstesinden gelemez. Belirleyebildiğim kadarıyla, CSS görünürlüğünü ele almak için bir seçici yok. İşteBunu nasıl çözdüm (standart jQuery seçicileri, daha yoğun bir sözdizimi olabilir):  visibility     
497
2017-06-26 07: 12: 02Z
  1. Bu cevap kelimenin tam anlamıyla How you would test if an element has been hidden or shown using jQuery?'u ele almakta iyidir, ancak soru display idi. JQuery kullanmak, visibility: hidden özelliği anlamına gelir.
    2013-05-11 22: 37: 45Z
  2. opacity: 0 veya :visible olan öğeler, hala mizanpajda yer harcadıkları için görünür olarak kabul edilir. Pedro Rainho tarafından yanıtlanan ve jQuery belgeleri .
    2013-10-16 09: 12: 04Z
  3. , düğümün ebeveynlerini kontrol etmek için DOM’u kaydırmanız gerekir, aksi takdirde, bu işe yaramaz.
    2014-04-22 19: 20: 11Z
  4. .hide () ile öğe gizlerseniz bu işe yaramaz.
    2015-08-06 05: 51: 23Z

Değiştirilen öğenin durumunu nasıl belirlerim?


:hidden ve

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
seçicileri kullanarak bir öğenin çöküp çökmeyeceğini belirleyebilirsiniz.  :visible

Görünürlüğüne bağlı olarak bir öğeye etki ediyorsanız, seçici ifadeye yalnızca :hidden veya

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
ekleyebilirsiniz. Örneğin:  top:-1000px     
363
2016-01-12 14: 08: 58Z
  1. filter(":visible") gibi, öğe görünür pencereden uzağa taşırken neden hiçbir cevabın neden bahsetmediğini merak ediyorum, sanırım filter(":hidden") gibi ... Sanırım bu bir son durum
    2017-05-08 09: 34: 11Z

Genellikle bir şeyin görünür olup olmadığını kontrol ederken hemen ilerlemeye devam edersiniz ve onunla başka bir şey yaparsınız. jQuery zincirleme bunu kolaylaştırır.

Yani bir seçiciniz varsa ve yalnızca görünür veya gizliyse, üzerinde bazı işlemler yapmak istiyorsanız, bunu yapmak istediğiniz eylemle zincirleyerek if veya

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}
'u kullanabilirsiniz.

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}
ifadesi yerine, bunun gibi:  
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

Veya daha verimli, ama daha da çirkin:

 :visible

Hepsini bir satırda yapabilirsiniz:

 display     
270
2015-04-27 20: 10: 05Z
  1. Örnekte kullanılan pasajdaki DOM düğümünü çıkarmanız için bir neden yok ve daha sonra tekrar bakmak zorunda kalıyorlar. Sadece yapmak daha iyi: var $button = $('# btnUpdate'); Ve sonra If ifadelerinde $(button) yerine sadece $düğmesini kullanın. JQuery nesnesini önbelleğe alma avantajına sahiptir.
    2012-04-21 22: 32: 30Z
  2. işte basit bir örnek: jquerypot.com/…
    2018-04-29 13: 28: 08Z

none seçiciye göre jQuery belgeleri :

  
  • CSS type="hidden" değeri visibility: hidden'dur.
  •   
  • opacity: 0 ile form öğeleridir.
  •   
  • Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır.>   
  • Bir ata öğesi gizlenir, bu nedenle öğe sayfada gösterilmez.
  •   

display != none veya .css("display") == 'none''lu elemanlar, mizanpajda hala yer harcadıkları için görünür olarak kabul edilir.

Bu, bazı durumlarda yararlıdır ve diğerlerinde kullanışsızdır, çünkü öğenin görünür olup olmadığını kontrol etmek istiyorsanız (.css("visibility") == "hidden"), ebeveynlerin görünürlüğünü göz ardı ederek, :visible'u yapmanın yalnızca daha hızlı olmadığını, ancak geri döneceğini de göreceksiniz. görünürlük kontrolü doğru.

Ekran yerine görünürlüğü kontrol etmek istiyorsanız kullanmanız gerekenler: :visible.

Ayrıca, ek jQuery notlarını dikkate alın:

  

querySelectorAll(), bir jQuery uzantısı olduğundan ve CSS belirtiminin bir parçası olmadığı için, :visible'u kullanan sorgular, yerel DOM .filter(":visible") yönteminin sağladığı performans artışından yararlanamaz. Öğeleri seçmek için show() kullanırken en iyi performansı elde etmek için, önce saf bir CSS seçicisi kullanarak elemanları seçin, sonra hide()'u kullanın.

Ayrıca, performansla ilgili endişeleriniz varsa, Şimdi beni görüyorsun… performansı göster /gizle (2010-05-04). Öğeleri göstermek ve gizlemek için diğer yöntemleri kullanın.

    
223
2017-06-21 01: 41: 47Z

Bu benim için işe yarıyor ve div'mi gizli /görünür yapmak için

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
ve display:none kullanıyorum:  visibility:hidden     
199
2015-12-14 21: 32: 03Z

öğe görünürlüğü ve jQuery nasıl çalışır?

Bir öğe opacity:0, display:none veya visibility:hidden ile gizlenebilir. Bu yöntemler arasındaki fark:

  •  opacity:0 öğeyi gizler ve herhangi bir yer kaplamaz;
  •  
    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: ""
      });
    }
    
    öğeyi gizler, ancak düzende hala yer kaplar;
  • $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    
    , öğeyi "görünürlük: gizli" olarak gizler ve düzende hala yer kaplar; tek fark, opasitenin bir elemanı kısmen saydamlaştırmasına izin vermesidir;  visibility:hidden

    Yararlı jQuery geçiş yöntemleri:

     opacity:0
196
2017-07-30 22: 00: 31Z
  1. opacity:0 ile .hide { display: none!important; } arasındaki bir diğer fark, öğenin .addClass("hide")/.removeClass("hide") ile olaylara (tıklamalar gibi) yanıt vermesidir. Bu numarayı dosya yüklemeleri için özel bir düğme oluşturduğunu öğrendim.
    2012-06-29 18: 15: 21Z
  2. , opaklığı olan girişi gizlerseniz: 0, yine de sekme tuşuyla seçili olur
    2017-12-12 11: 08: 36Z

CSS sınıfı .hasClass("hide")'u kullanırdım.

Gizlemek /göstermek için .toggle()'u ararım. Görünürlüğü kontrol etmek için .animate() kullanıyorum.

.hasClass('hide') veya .closest('.hide').length > 0 yöntemlerini kullanmayı düşünmüyorsanız, öğeleri denetlemenin /gizlemenin /göstermenin basit ve net bir yolu.

    
152
2014-03-19 08: 15: 37Z
  1. 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;
    }
    
    , ebeveynin bir atalarının gizlenip gizlenmediğini kontrol etmez (bu da onu gizler). Bunun visibility: hidden olup olmadığını kontrol ederek doğru bir şekilde çalışmasını sağlayabilirsiniz, ancak neden tekerleği yeniden icat ettiniz?
    2012-09-25 23: 57: 15Z
  2. Eger html'de görülebilen bir eleman varsa, size javascript kodunuz /görünüm motorunuz tarafından doğrudan gizlendiyse varyantım döner. Ana öğelerin hiçbir zaman gizlenmemesi gerektiğini biliyorsanız, daha katı olmak ve gelecekteki hataları önlemek için .hasClass () öğesini kullanın.Sadece görünürlük değil, aynı zamanda ayarlanan öğe durumunu da kontrol etmek istiyorsanız, .hasClass () öğesini de kullanın. Diğer durumlarda .closest () daha iyidir.
    2012-12-01 20: 27: 09Z
  3. Neden sadece .is (": visible") kullanmıyorsunuz?
    2018-10-16 09: 43: 43Z

Bunu düz JavaScript kullanarak da yapabilirsiniz:

 hidden

Notlar:

  1. Her yerde çalışıyor

  2. İç içe geçmiş öğeler için çalışır

  3. CSS ve satır içi stilleri için çalışır

  4. Çerçeve gerektirmiyor

148
2014-03-19 08: 15: 29Z
  1. jQuery'ninkinden biraz farklı çalışır; visible’u görünür olarak görür.
    2012-09-20 04: 45: 23Z
  2. Yukarıdaki kodu (tartışmasız aptal) jQuery davranışını taklit edecek şekilde değiştirmek yeterince kolaydır. . . . . işlevi isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {} true;} if (o.currentStyle & & o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);}; if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode);}} return false;}
    2012-09-26 13: 57: 30Z
  3. Elbette, bunu kodunu taramadan kullanan kullanıcıların faydası için ekliyorum. :)
    2012-09-26 21: 33: 20Z

Kişi şu şekilde

$('element:hidden')
$('element:visible')
veya
$(element).is(":visible")
özelliğini kullanabilir:  
$('#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="" />

Veya is ile aynı şekilde basitleştirebilirsiniz.

 ebdiv     
126
2013-03-16 10: 04: 04Z
122
2018-12-13 12: 15: 11Z
  1. @ Adrew, ancak bu bağlantı bu fonksiyonun çalışma örneğini gösteriyor. Bence pratik bir cevap tüm metnin üstüne ağırlık verebilir :)
    2013-01-25 06: 30: 44Z
  2. @ jolly.exe, bu çalışma örneği ortadan kalkana kadar.
    2013-10-10 21: 49: 17Z

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
, if (!$('#thetagname').length) olarak ayarlanmalıdır. Hem gösteri hem de gizleme için çalışır:  :hidden     
118
2018-10-26 07: 33: 26Z

Dikkate almanız gereken bir başka cevap, bir öğeyi gizliyorsanız, jQuery , ancak aslında gizlemek yerine, tüm öğeyi kaldırt HTML içeriğini ve etiketin kendisini bir jQuery değişkenine kopyaladıysanız ve sonra ihtiyacınız olan her şeyi Normal bir

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>
kullanarak ekranda böyle bir etiket olup olmadığını test etmektir.     
114
2013-03-26 22: 12: 11Z

Bir öğeyi jQuery'de

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
seçiciye karşı test ederken, alt öğeleri görünür olsa bile, mutlak bir konumlanmış öğenin gizli olarak tanınabileceği düşünülmelidir .

Bu, ilk bakışta biraz sezgisel görünmektedir - jQuery belgelerine daha yakından bakmakla birlikte, ilgili bilgileri verir:

  

Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır. [...]

Yani bu aslında kutu modeli ve öğenin hesaplanan stili açısından anlamlıdır. Genişlik ve yükseklik açık bir şekilde 0 olarak ayarlanmasa bile, dolaylı olarak ayarlanabilir.

Aşağıdaki örneğe bir göz atın:

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

JQUERY 3.x GÜNCELLEME:

jQuery 3 ile açıklanan davranış değişecektir! Sıfır genişlik ve /veya yüksekliktekiler de dahil olmak üzere herhangi bir düzen kutusuna sahipseniz, öğeler görünür sayılır.

jQuery 3.0.0-alpha1 ile JSFiddle:

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

Aynı JS’de bu çıktıya sahip olur:

 
$(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>
    
89
2016-08-06 08: 53: 27Z

Bu işe yarayabilir:

 !     
84
2013-03-06 06: 41: 05Z
  1. Bu hangi dil /lehçe /kütüphanedir? JS’deki bu sözdizimine aşina değilim ...
    2012-09-25 23: 31: 33Z
  2. Bir yasemin birim testine benziyor.
    2017-03-23 ​​00: 48: 31Z

Örnek:

 
if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}
    
67
2017-07-16 13: 52: 00Z

Görünür olup olmadığını kontrol etmek için

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
kullanıyorum:  Display

Veya aşağıdakiler aynı zamanda sam, jQuery seçicisini, bir defaya ihtiyaç duyduğunuzda daha iyi performansa sahip olması için bir değişkene kaydederek:

 
$(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>
    
63
2013-09-14 08: 01: 52Z
  1. Bir seçiciyi değişkene kaydetmenin gerçekten daha hızlı olduğunu nasıl belirlediniz?
    2013-06-20 21: 32: 30Z
  2. Merhaba @Ilia Rostovtsev jsperf.com/caching -jquery-selectors Burada testi yapabilirsiniz. Neyse, daha hızlı erişilebilmesi için önbelleğe alınmış olması güzeldir
    2013-06-21 06: 56: 50Z
  3. Bu, aynı nesneyi çağırmak ve çağırmak yerine işlem boyunca tek bir değişken kullanmak istiyorsanız uygundur.
    2013-08-25 16: 57: 09Z

Stil düzenlemeyi değil, sınıf geçişini kullanın. . .

Öğeleri "gizlemek" için belirlenen sınıfları kullanmak kolaydır ve aynı zamanda en verimli yöntemlerden biridir. filter:alpha 'yok' stiliyle 'gizli' bir sınıfa geçmek, bu stilin doğrudan düzenlenmesinden daha hızlı sonuç verir. Bunlardan bazılarını İyice Yığın Taşması sorusundaki Aynı divde iki öğeyi görünür /gizli duruma getirme .


JavaScript En İyi Uygulamalar ve Optimizasyon

İşte Google ön uç mühendisi Nicholas Zakas'ın Google Tech Talk’unun gerçekten aydınlatıcı bir videosu:

60
2017-05-23 12: 10: 45Z

Adblocker için görünür kontrolünü kullanma örneği etkinleştirildi:

 display:none

"ablockercheck", adblocker'ın engellediği bir kimliğidir. Bu nedenle, görünür durumda olup olmadığını kontrol etmek, reklam engelleyicinin Açık olup olmadığını tespit edebilirsiniz.

    
58
2016-09-13 14: 07: 43Z

Sonuçta, hiçbir örnek bana uymuyor, bu yüzden kendime yazdım.

Testler (Internet Explorer visibility:hidden'u desteklemiyor):

a) Belgenin gizli olup olmadığını kontrol edin

b) Bir öğenin satır içi stillerde sıfır genişlik /yükseklik /opaklık veya overflow:hidden/display:none olup olmadığını kontrol edin

c) Elemanın merkezinin (ayrıca her piksel /köşeyi test etmekten daha hızlı olduğu için) diğer element (ve tüm atalar, örneğin:

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;
    }
})();
/kaydırma /bir elementin diğer aygıtlar) tarafından gizlenip gizlenmediğini kontrol edin

d) Bir elemanın sıfır genişlik /yükseklik /opaklık veya

is_visible(elem) // boolean
/görünürlük olup olmadığını kontrol edin: hesaplanan stillerde gizli (tüm atalar arasında)

Test edildi

Android 4.4 (Yerel tarayıcı /Chrome /Firefox), Firefox (Windows /Mac), Chrome (Windows /Mac), Opera (Windows Presto /Mac Webkit), Internet Explorer (Internet Explorer 5-11 belge modu + sanal makinede Internet Explorer 8), Safari (Windows /Mac /iOS)

 
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Nasıl kullanılır:

 $(this).is(":visible")     
57
2014-04-28 18: 10: 50Z

Her ikisini de kontrol etmeniz gerekiyor ... Görünüşün yanı sıra gösterimi:

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

if (this.hidden === false) {
    // Your code
}
'u kontrol edersek, jQuery her ikisini de otomatik olarak kontrol eder.     
51
2014-07-19 15: 23: 42Z

Belki böyle bir şey yapabilirsiniz

 is(':visible')
    
39
2016-05-02 12: 59: 24Z

Basitçe, gibi bir boole değeri olup olmadığını kontrol ederek görünürlüğü kontrol edin:

 Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout

Bu kodu her işlev için kullandım. Aksi halde, bir elemanın görünürlüğünü kontrol etmek için

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;
    }
});
'u kullanabilirsiniz.     
34
2017-07-16 13: 56: 39Z

Çünkü

.element{
    position: absolute;left:-9999;    
}
( jQuery: visible Selector ) - öğenin gerçekten bu şekilde görünüp görünmediğini kontrol edebiliriz:  
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
    
33
2014-03-20 10: 32: 25Z

Ancak, öğenin CSS’si aşağıdaki gibidir:

 $('elementToToggle').toggle('slow');

Yani, Yığın Taşması sorusuna bu cevabı Bir öğenin ekran dışı olup olmadığını kontrol etme ayrıca dikkate alın.

    
31
2017-05-23 11: 55: 02Z

Ayrıca, öğenin durumunu kontrol etmek ve sonra onu değiştirmek için üçlü bir koşullu ifade:

 :)     
30
2013-11-05 23: 32: 02Z
  1. Veya, ynkno, şartlı koşulların hepsinden kurtulun ve
    if($('#postcode_div').is(':visible')) {
        if($('#postcode_text').val()=='') {
            $('#spanPost').text('\u00a0');
        } else {
            $('#spanPost').text($('#postcode_text').val());
    }
    
    ...
    function checkUIElementVisible(element) {
        return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
    }
    
    deyin
    2013-12-25 08: 53: 21Z
      
30
2013-12-07 13: 51: 23Z

Elemanın UI'da gösterilip gösterilmediğini ölçmek için görünürlük /görüntüleme niteliklerini kontrol etmek için bir fonksiyon oluşturulabilir.

 

Çalışma Fiddle'ı

    
30
2014-11-22 11: 23: 57Z
kaynak yerleştirildi İşte