Firefox, sorgu seçici ve görünür seçici seçici

Question

Görünürlüğü algılamak için Firefox'un querySelector() veya querySelectorAll() işlevleriyle sahte bir seçici kullanmak için herhangi bir yöntem var mı? Özellikle böyle bir şey yapabilmek istiyorum:

elem.querySelector('#list .list-item:visible'); 
elem.querySelector('#section .sub-section:visible .title'); 

tarayıcı tutarsızlıklar veya diğer uygulama, sadece Firefox hakkında endişelenmenize gerek yok. Teşekkürler!

DÜZENLEME: Görünürekrana olmamak hiçbiri gizlenen değil ve görünürlük ile tanımlanır.

Answer 1

Hayır, yok. The CSS specification, :visible (veya ilgili) seçiciyi tanımlamaz ve AFAIK Firefox, standart olmayan sözde seçicileri uygulamamaktadır.

kendini bu uygulamak isterseniz jQuery onun :visible seçici nasıl uyguladığını, not:

onun CSS "ekran" "değilse bir eleman görülebiliyordu jQuery 1.3.1 (ve üzeri) olarak

hiçbiri ", CSS" görünürlüğü "" gizli "değildi ve türü (bir girdi ise)" gizli "değildi. JQuery onun tarayıcı rapor offsetWidth veya offsetHeight daha büyük 0.

kaynağı ise, bir elemanın görünür 1.3.2: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

Answer 2

hiçbir nativ implimentation olduğundan: I karar görebilir sözde seçici Elemanlarımı gizlemek ve göstermek için CSS sınıflarını kullanmak, böylece yalnızca görünürlük yerine sınıf adını kontrol etmeyi mümkün kılmak.

elem.querySelector('#list .list-item:not(.hidden)'); 

Şimdi 2016 yılında biz de gizli html5 özelliğini kullanabilirsiniz, bu nedenle bu seçici iş çok: İşte şimdi gibi benim seçici benzediğini olduğunu

elem.querySelector('#list .list-item:not([hidden])'); 

Answer 3

denetleme elemanı görünür ise, üzerinde destekler tüm büyük tarayıcılar:

jQuery:

$('.list-item').is(':visible'); 

Vanilya JS:

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

Answer 4

düz javascript kullanarak, aynı zamanda, kolayca jQuery davranışını taklit bir diziye içine querySelector sonuçlarını dönüm ve bunu filtreleme olabilir:

sizin seçicinin sonuçları ile düz bir dizi oluşturur

Array.prototype.slice.call(document.querySelectorAll('your selector')) 

,

.filter(function (item,index) { return item.style.display!="none" }); 

veya jquery koşullarının bile geri kalanı (item.style.visibility != "hidden" && item.style.opacity > 0 && ...): Eğer olarak süzebilirsiniz.

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" });