web-gelistirme-sc.com

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

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

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

7074
Philip Morton

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'ın önerisiyle aynı , ancak tek bir öğeye uygulanır; ve jQuery FAQ 'de önerilen algoritma ile eşleşir.

8738

hidden selector öğesini kullanabilirsiniz:

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

Ve visible selector:

// Matches all elements that are visible
$('element:visible')
1339
twernt
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Yukarıdaki yöntem ebeveynin görünürlüğünü dikkate almaz. Ebeveynleri de göz önünde bulundurmak için .is(":hidden") veya .is(":visible") işlevlerini kullanmalısınız.

Örneğin,

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

Yukarıdaki yöntem, div2 değil iken :visible 'un görünür olduğunu düşünecektir. Ancak yukarıdakiler birçok durumda yararlı olabilir, özellikle de gizli ebeveynde görünen herhangi bir hata div olup olmadığını bulmanız gerektiğinde, çünkü böyle durumlarda :visible çalışmayacaktır.

850
Mote

Bu cevapların hiçbiri soru olarak ne anlayamadığımı, ne aradığımı değil, "visibility: hidden olan öğeleri nasıl ele alabilirim?" . Her ikisi de belge başına ekran aradıklarından, :visible veya :hidden bu işlemi gerçekleştiremez. Belirleyebildiğim kadarıyla, CSS görünürlüğünü ele almak için bir seçici yok. İşte nasıl çözdüğüm (standart jQuery seçicileri, daha yoğun bir sözdizimi olabilir):

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

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


Bir öğenin çöküp çökmeyeceğini, :visible ve :hidden seçicilerini kullanarak belirleyebilirsiniz.

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

Görünürlüğüne göre bir eleman üzerinde hareket ediyorsanız, seçici ifadeye sadece :visible veya :hidden ekleyebilirsiniz. Örneğin:

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

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.

Bu nedenle bir seçiciniz varsa ve yalnızca görünür veya gizliyse üzerinde bir işlem yapmak istiyorsanız, filter(":visible") veya filter(":hidden") komutunu ve ardından yapmak istediğiniz eylemle zincirlemeyi kullanabilirsiniz.

Yani, if ifadesi yerine, şöyle:

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

Ya da daha verimli, ama daha çirkin:

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

Hepsini bir satırda yapabilirsiniz:

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

jQuery belgelerine göre :visible seçici :

  • CSS display __ none değerine sahiptir.
  • Bunlar type="hidden" ile form öğeleridir.
  • Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır.
  • Ata öğesi gizlenir, böylece öğe sayfada gösterilmez.

visibility: hidden veya opacity: 0 olan öğelerin görünüşte olduğu kabul edilir, çünkü düzende hala yer kaplarlar.

Bu, bazı durumlarda yararlıdır ve diğerlerinde kullanışsızdır, çünkü öğenin görünür olup olmadığını (display != none) kontrol etmek istiyorsanız, ebeveynlerin görünürlüğünü göz ardı ederek, .css("display") == 'none' işlevini yapmanın yalnızca daha hızlı olmadığını, aynı zamanda görünürlük kontrolünü de doğru şekilde getireceğini göreceksiniz. .

Ekran yerine görünürlüğü kontrol etmek istiyorsanız, şunları kullanmalısınız: .css("visibility") == "hidden".

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

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

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

211
Pedro Rainho

Bu benim için çalışıyor ve div'mi gizli/görünür yapmak için show() ve hide() kullanıyorum:

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

eleman görünürlüğü ve jQuery nasıl çalışır;

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

  • display:none, öğeyi gizler ve herhangi bir yer kaplamaz;
  • visibility:hidden, öğeyi gizler, ancak yine de düzende yer kaplar;
  • opacity:0, öğeyi "görünürlük: gizli" olarak gizler ve düzende hala yer kaplar; tek fark opaklığın bir elementi kısmen saydamlaştırmasına izin vermesidir; 

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

    Faydalı jQuery geçiş yöntemleri: 

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    
185
webvitaly

CSS sınıfı .hide { display: none!important; } kullanırdım. 

Gizlemek/göstermek için, .addClass("hide")/.removeClass("hide") çağırırım. Görünürlüğü kontrol etmek için .hasClass("hide") kullanıyorum.

.toggle() veya .animate() yöntemlerini kullanmayı düşünmüyorsanız, öğeleri kontrol etmek/gizlemek/göstermek için basit ve net bir yoldur.

146
Evgeny Levin

Bunu düz JavaScript kullanarak da yapabilirsiniz:

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

Notlar:

  1. Her yerde çalışır

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

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

  4. Bir çerçeve gerektirmez

141
Matt Brock

Biri basitçe hidden veya visible niteliğini kullanabilir:

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

Veya aynısını is ile aynı şekilde basitleştirebilirsiniz.

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

Demo Bağlantısı 

$('#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="" />

Kaynak: 

Blogger Plug n Play - jQuery Araçları ve Widget'ları: jQuery Kullanarak Öğenin gizli veya Görünür Olduğunu Görünme

111
Code Spy

Dikkate almanız gereken bir başka cevap, eğer bir öğeyi gizliyorsanız, jQuery kullanmanız gerekir, ancak gerçekte gizlemek yerine tüm öğeyi kaldırırsınız, ancak HTML etiketi bir jQuery değişkenine dönüştürür ve ardından yapmanız gereken tek şey, normal if (!$('#thetagname').length) işlevini kullanarak ekranda böyle bir etiket olup olmadığını sınamaktır.

110
think123

ebdiv, style="display:none;" olarak ayarlanmalıdır. Her ikisi de göstermek ve saklamak için çalışır:

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

Bir öğeyi jQuery'de :hidden seçicisine karşı test ederken, alt öğeleri görünür olsa da mutlak konumlandırılmış bir öğenin gizlenmiş 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 birkaç nedenden dolayı gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır. [...]

Yani bu aslında kutu modeli ve elemanın hesaplanan stili açısından anlamlıdır. Genişlik ve yükseklik ayarlanmasa bile açıkça - 0 olarak ayarlanabilirler dolaylı olarak.

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

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>

JQUERY İÇİN GÜNCELLEME 3.x:

JQuery 3 ile açıklanan davranış değişecektir! Sıfır genişlik ve/veya yüksekliğe sahip olanlar dahil, herhangi bir düzen kutusu varsa, öğeler görünür kabul edilir.

JQuery 3.0.0-alpha1 ile JSFiddle:

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

Aynı JS sonra bu çıktıya sahip olacaktır:

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

Bu işe yarayabilir:

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

Örnek: 

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

Görünür olup olmadığını kontrol etmek için ! kullanıyorum:

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

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şkende saklamak:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
62
Matthias Wegtun

Stil düzenlemeyi değil, sınıf değiştirme özelliğini kullanın. . .

"Gizleme" elemanları için belirlenmiş sınıfları kullanmak kolaydır ve aynı zamanda en verimli yöntemlerden biridir. 'Gizli' sınıfını Display 'none' stiliyle değiştirmek, bu stili doğrudan düzenlemekten daha hızlı sonuç verir. Bunların bir kısmını iyice açıkladım Stack Overflow sorusunda Aynı div'de görünür/gizli.


JavaScript En İyi Uygulamalar ve Optimizasyon

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

59
Lopsided

visible kontrolünün adblocker için kullanılmasının örneği aktif:

$(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", 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.

56
Roman Losev

Ne de olsa hiçbir örnek bana uymuyor, ben de kendim yazdım.

Testler (Internet Explorer filter:alpha desteği yok):

a) Dokümanın gizli olup olmadığını kontrol edin

b) Satır içi stillerde bir öğenin sıfır genişlik/yükseklik/opaklık veya display:nonevisibility:hidden 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: overflow:hidden/scroll/bir elementin diğerlerine göre) gizlenmediğinden emin olun.

d) Bir elemanın sıfır genişlik/yükseklik/opaklık veya display:none/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 modları + İnternet) Sanal makinede Explorer 8), 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;
    }
})();

Nasıl kullanılır:

is_visible(elem) // boolean
55
Aleko

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

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

$(this).is(":visible") işlevini kontrol edersek, jQuery her ikisini de otomatik olarak denetler.

50

Belki böyle bir şey yapabilirsin

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

Çünkü Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout ( jQuery: visible Selector için açıklandığı gibi) - elementin bu şekilde really görünür olup olmadığını kontrol edebiliriz:

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

Basitçe, örneğin bir boolean değerini kontrol ederek görünürlüğü kontrol edin:

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

Her fonksiyon için bu kodu kullandım. Aksi takdirde, bir elemanın görünürlüğünü kontrol etmek için is(':visible') işlevini kullanabilirsiniz.

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

Peki ya elementin CSS'si aşağıdaki gibi ise?

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

Öyleyse Yığın Taşması sorusuna bu cevap _ Bir elementin ekran dışı olup olmadığı nasıl kontrol edilir de dikkate alınmalıdır.

30
RN Kushwaha

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
29
cssimsek

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

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Çalışıyor Fiddle

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

Bunun için araştırdım ve cevaplarımın hiçbiri benim durumum için doğru değil, o yüzden birinin gözleri öğeyi göremiyorsa yanlış döndürecek bir işlev yarattım.

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

JQuery dahili olarak bu sorunu çözüyor:

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

Eğer jQuery kullanmazsanız, sadece bu kodu kaldırabilir ve kendi fonksiyonunuza dönüştürebilirsiniz:

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

Hangi isVisible, öğe görünür olduğu sürece true değerini döndürür.

15
Oriol

Sadece bu öğenin görülebilir olup olmadığını kontrol edin ve bir boolean , jQuery döndürür, öğeye hiçbirini göstermeyerek öğeleri gizler. Örneğin:

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

Ayrıca, jQuery'yi kullanarak kodunuzun geri kalanını göründüğü gibi kullanabilirsiniz ve daha küçük bir kod bloğuna sahipsiniz, jQuery'deki gibi bir şey sizin için de aynı şeyi yapsın:

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

Ayrıca, jQuery'de css yöntemini kullanmak da aynı şeyle sonuçlanabilir:

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

Ayrıca görünürlük ve görüntü kontrolü için aşağıdakileri yapabilirsiniz:

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

Bir öğenin jQuery'de görünür olup olmadığını kontrol etmenin epeyce yolu vardır.

Örnek referans için demo HTML

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

Görünürlük Filtre Seçicisini Kullan $('element:hidden') veya $('element:visible')

  • $('element:hidden'): Gizli olan tüm öğeleri seçer.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): Görünen tüm öğeleri seçer.

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

Daha fazlası için http://api.jquery.com/category/selectors/visibility-filter-selectors/

Kullanım is() Filtreleme

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

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

Daha fazlası için http://api.jquery.com/is/

14
Arun Karnawat

hide(), show() ve toggle() öğelerinin satır içi css'lerini (ekran: yok ya da ekran: blok) öğeye ekler.

GÜNCELLEME:

  • Ayrıca css öğesinin görünürlük için ayarlanıp ayarlanmadığını kontrol etmeniz gerekir: "görülebilir" veya görünürlük: "gizli"
  • Eğer display özelliği inline-block, block, flex olarak ayarlanırsa eleman da görülebilir.

Böylece onu görünmez yapan elementin özelliğini kontrol edebiliriz. Yani onlar display: none ve visibility: "hidden";.

Gizleme elemanından sorumlu olan mülkü kontrol etmek için bir nesne oluşturabiliriz:

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

Anahtar için element özelliğinin gizli özellik değeriyle eşleşip eşleşmediğini, nesne eşlemesindeki her bir anahtar değerinden geçerek kontrol edebiliriz.

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

Eğer element yüksekliği: 0 veya genişlik: 0 veya daha fazla olan bir özelliği kontrol etmek istiyorsanız, bu nesneyi uzatabilir ve daha fazla özellik ekleyebilir ve kontrol edebilirsiniz.

Bana diğer ekran özelliklerini hatırlattığınız için teşekkür ederiz @Krzysztof Przygoda.

14
No one

Bunu kullanabilirsiniz:

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

Örnek kod

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

Bu, etiketin görünür olup olmadığını kontrol etmek için bir seçenektir.

 // 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

Sadece bunu açıklamak istiyorum, jQuery'de,

Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir:

  • Hiçbiri bir CSS ekran değerine sahipler.
  • "Gizli" type = form öğeleridir.
  • Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır.
  • Ata öğesi gizlenir, böylece öğe sayfada gösterilmez.

Görünürlüğe sahip öğeler: gizli veya opaklık: 0, düzende hala yer harcadıkları için görünür olarak kabul edilir. Bir öğeyi gizleyen animasyonlar sırasında, öğenin, animasyonun sonuna kadar görünür olduğu kabul edilir.

Kaynak: : gizli Seçici | jQuery API Belgeleri

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

Görünür olduğunda sadece bir sınıf ekleyebilirsiniz. Bir sınıf ekleyin, show. Sonra bir sınıfa sahip olup olmadığını kontrol edin:

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

show sınıfına sahipseniz true değerini döndürür.

CSS'yi şunun gibi ekle:

.show{ display: block; }
9
Sahan

Gizli elemanları kontrol etmek için çok fazla yöntem var. Bu en iyi seçenek (sadece sizi tavsiye ederim):

JQuery kullanarak, gizli için CSS'de "display: none" adlı bir öğe yapın.

Önemli olan:

$('element:visible')

Ve kullanım için bir örnek:

$('element:visible').show();
7

Basitçe display niteliğini (veya ne tür görünmezliğe tercih ettiğinize bağlı olarak visibility) kontrol edin. Örnek :

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

Kullanabilirsiniz 

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

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

4
Wolfack

1 • jQuery çözümü

Bir öğenin JQuery'de görünür olup olmadığını belirleme yöntemleri

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

Tüm visible döngülerinde 'myelement' kimliğinin div çocukları:

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

JQuery kaynağında bakmış

JQuery bu özelliği şu şekilde uygular:

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

2 • Bir elementin ekran dışı olup olmadığı nasıl kontrol edilir - CSS

Element.getBoundingClientRect () öğesini kullanarak, öğenizin görünüm alanınızın sınırları dahilinde olup olmadığını kolayca belirleyebilirsiniz (örn. Ekrandaki veya ekran dışı):

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

Daha sonra bunu birkaç yolla kullanabilirsiniz:

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

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

Angular kullanıyorsanız, şunları kontrol edin: Angular ile gizli öznitelik kullanmayın

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

Bazı zamanlarda, öğenin görünür olup olmadığına bağlı olarak sayfada öğenin görünür olup olmadığını kontrol etmek istiyorsanız, öğenin width ve height öğelerinin 0'ye eşit olup olmadığını kontrol edebilirsiniz.

jQuery

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

Vanilya

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

Veya

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

2
Profesor08

Seçilen öğeyi görünür veya gizli olarak kontrol etmek için jQuery is() işlevini kullanabilirsiniz. Bu yöntem, geçen parametreyi karşılayan bir eşleşme bulmak için DOM öğelerini dolaşır. Bir eşleşme olursa doğru döner, aksi takdirde false döndürür.

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

Sınıfı açarak göründüğünde veya gizlendiğinde css sınıfını kullanabilirsiniz.

.show{ display :block; }

JQuery toggleClass() veya addClass() veya removeClass(); adreslerini ayarlayın.

Örnek olarak,

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

Yukarıdaki kod, eleman show olmadığında show css sınıfını ekler ve show sınıfına sahip olduğunda kaldırır.

Ve görünür olup olmadığını kontrol ederken, bu jQuery kodunu takip edebilirsiniz,

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

Yukarıdaki kod, #myID öğesi sınıfımıza (show) sahipken bir boole (true) döndürür ve (show) sınıfına sahip olmadığında false döndürür.

0
Sahan

Her bir event için element__ yazmak yerine, Bunu yapın:

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

Ayrıca girişlerde kullanabilirsiniz:

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

Deneyin

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

Bunu yapabilirsiniz:

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

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

jQuery çözümü, oldukça eski bir soru ama yine de düştüm, ayrıca düğme metnini de değiştirmek isteyenler için biraz daha iyi cevap verebilirim.

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

Adil olmak gerekirse, soru bu cevabı önceden tarihler. OP'yi eleştirmek değil, hala bu soruyu soran kimseye yardım etmek için ekledim.

Bir şeyin görünür olup olmadığını belirlemenin doğru yolu, görüş modelinize danışmaktır. Bunun ne anlama geldiğini bilmiyorsanız, çalışmanızı çok daha az zorlaştıracak bir keşif yolculuğuna çıkmak üzeresiniz.

İşte model-view-viewmodel architecture (MVVM) 'a genel bakış.

NakavtJS , bütün bir çerçeveyi öğrenmeden bu şeyleri denemenizi sağlayacak bağlayıcı bir kütüphanedir.

Ve işte bazı JS ve görünür ya da görünmeyen bir DIV.

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

Geçiş işlevinin div'in görünürlüğünü belirlemek için DOM ile görüşmediğine dikkat edin, görünüm modeline bakın.

0
Peter Wone