Elemanın DOM'da görünür olup olmadığını kontrol edin

Bir öğenin görünür olup olmadığını saf JS (jQuery olmadan) ile kontrol edebilmemin bir yolu var mı?

Yani, örneğin, bu sayfada: Performance Bikes, eğer Fırsatlar'ın üzerine gelirseniz (üst menüde), bir fırsatlar penceresi görünür, ancak başlangıçta gösterilmiyordu. HTML'de var ama görünür değil.

Peki, bir DOM öğesi verildiğinde, görünür olup olmadığını nasıl kontrol edebilirim? Ben denedim:

window.getComputedStyle(my_element)['display']);

ama işe yarıyor gibi görünmüyor. Acaba hangi özellikleri kontrol etmeliyim? Aklıma geliyor:

display !== 'none'
visibility !== 'hidden'

Atladığım başka bir şey var mı?

Sunil Garg
Edited question 2018ööp59öö6 Mayıs 2018 в 6:59
Programlama
javascript dom
2013ösp45ös21 Ekim 2013 в 9:45
44 görünümler
Çözüm

Bu MDN belgesine]1 göre, bir öğe veya ebeveynlerinden herhangi biri görüntüleme stili özelliği aracılığıyla gizlendiğinde offsetParent özelliği null değerini döndürür. Sadece elemanın sabit olmadığından emin olun. Sayfanızda position: fixed; öğesi yoksa, bunu kontrol etmek için bir kod şöyle görünebilir:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

Öte yandan, bu aramaya yakalanabilecek sabit konumlu öğeleriniz varsa, ne yazık ki (ve yavaşça) window.getComputedStyle() kullanmak zorunda kalacaksınız. Bu durumda fonksiyon şöyle olabilir:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}
  1. Seçenek muhtemelen daha fazla uç durumu hesaba kattığı için biraz daha basittir, ancak bahse girerim oldukça yavaştır, bu nedenle bu işlemi birçok kez tekrarlamanız gerekiyorsa, muhtemelen bundan kaçınmak en iyisidir.
7ochem
Edited answer 2018ööp49öö9 Ekim 2018 в 9:49
Yorumlar (19)

Bu yardımcı olabilir : Öğeyi en sol konuma getirerek gizleyin ve ardından offsetLeft özelliğini kontrol edin. Eğer jQuery kullanmak istiyorsanız sadece :visible seçicisini kontrol edebilir ve elemanın görünürlük durumunu alabilirsiniz.

HTML :

<div id="myDiv">Hello</div>

CSS :


#myDiv{
   position:absolute;
   left : -2000px;
}


#myDiv{
    visibility:hidden;
}

javaScript :

var myStyle = document.getElementById("myDiv").offsetLeft;

if(myStyle < 0){
     alert("Div is hidden!!");
}

jQuery :

if(  $("#MyElement").is(":visible") == true )
{  
     alert("Div is hidden!!");        
}

jsFiddle

Ashad Shanto
Edited answer 2014ösp18ös13 Ekim 2014 в 1:18
Yorumlar (7)

Eğer sadece görünürlüğü tespit etmenin temel yollarını topluyorsak, unutmayalım:

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

Ve niteliklerin nasıl elde edileceğine gelince:

element.getAttribute(attributename);

Yani, senin örneğinde:

document.getElementById('snDealsPanel').getAttribute('visibility');

Ama ne? Burada çalışmıyor. Daha yakından baktığınızda, görünürlüğün öğe üzerinde bir nitelik olarak değil, style özelliği kullanılarak güncellendiğini göreceksiniz. Bu, yaptığınız şeyi yapmaya çalışırken karşılaşılan birçok sorundan biridir. Diğerlerinin yanı sıra: görünürlük, ekran ve opaklık değerlerinin hepsi doğru olduğu için bir öğede gerçekten görülecek bir şey olduğunu garanti edemezsiniz. Hala içerikten yoksun olabilir ya da yükseklik ve genişlikten yoksun olabilir. Başka bir nesne onu gizleyebilir. Daha fazla ayrıntı için, hızlı bir Google araması this'i ortaya çıkarır ve hatta sorunu çözmeyi denemek için bir kütüphane içerir. (YMMV)

Bu sorunun olası yinelemeleri olan ve güçlü John Resig'in bazı içgörüleri de dahil olmak üzere mükemmel yanıtlar içeren aşağıdakilere göz atın. Ancak, sizin özel kullanım durumunuz standart olandan biraz farklı, bu nedenle işaretlemekten kaçınacağım:

(DÜZENLEME: OP, SAYFALARI OLUŞTURMADIĞINI, KAZIMA YAPTIĞINI SÖYLÜYOR, BU NEDENLE AŞAĞIDAKI GEÇERLI DEĞIL) Daha iyi bir seçenek mi? Angular'ın ng-show ile yaptığı gibi, öğelerin görünürlüğünü model özelliklerine bağlayın ve görünürlüğü her zaman bu modele bağlı hale getirin. Bunu istediğiniz herhangi bir aracı kullanarak yapabilirsiniz: Angular, düz JS, her neyse. Daha da iyisi, DOM uygulamasını zaman içinde değiştirebilirsiniz, ancak durumu her zaman DOM yerine modelden okuyabileceksiniz. Gerçeğinizi DOM'dan okumak kötüdür. Ve yavaştır. Modeli kontrol etmek ve DOM durumunun modeli yansıttığından emin olmak için uygulamanıza güvenmek çok daha iyidir. (Ve bu varsayımı doğrulamak için otomatik testleri kullanın.)

Community
Edited answer 2017ööp54öö11 Mayıs 2017 в 11:54
Yorumlar (1)