Firefox, selettore di query e pseudo selettore visibile

Question

Esiste comunque uno pseudo-selettore con le funzioni querySelector() o querySelectorAll() di Firefox per rilevare la visibilità? In particolare voglio essere in grado di fare qualcosa del genere:

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

Non c'è bisogno di preoccuparsi di incongruenze del browser o altre implementazioni, solo Firefox. Grazie!

EDIT: Visibile è definito da visualizzazione non essere nessuno e visibilità non essere nascosti.

Answer 1

No, non c'è. The CSS specification non definisce un selettore :visible (o relativo) e AFAIK Firefox non implementa pseudo selettori non standard.

Se vuoi implementare da soli, notare come jQuery implementa la sua :visible selettore:

In jQuery 1.3.1 (e precedenti) un elemento era visibile se CSS "display" non era " nessuno ", la sua" visibilità "CSS non era" nascosta "e il suo tipo (se era un input) non era" nascosto ". In jQuery 1.3.2 un elemento è visibile se il suo browser-riferito offsetWidth o offsetHeight è maggiore di 0.

Fonte: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

Answer 2

Poiché non v'è implimentation nativa del: selettore di pseudo visibile decisi usare le classi CSS per nascondere e mostrare i miei elementi, permettendo così semplicemente di controllare il nome della classe invece della visibilità. Ecco ciò che il mio selettore appare come ora:

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

Ora nel 2016 possiamo anche utilizzare l'attributo HTML5 nascosto, in modo da questo selettore avrebbe funzionato troppo:

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

Answer 3

Verificando elemento è visibile, sostiene il tutti i principali browser:

jQuery:

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

Vanilla JS:

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

Answer 4

Utilizzo di javascript pianura, si potrebbe anche emulare il comportamento jQuery facilmente, trasformando i risultati querySelector in un array, e filtrandola:

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

che crea un array di pianura con i risultati del vostro selettore, che è possibile filtrare come:

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

o anche il resto delle condizioni di jQuery (item.style.visibility != "hidden" && item.style.opacity > 0 && ...).

Come uno di linea:

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