Gibt es überhaupt eine Möglichkeit, einen Pseudo-Selektor mit den Funktionen querySelector () oder querySelectorAll () von Firefox zu verwenden, um die Sichtbarkeit zu erkennen? Insbesondere möchte ich in der Lage sein, so etwas zu tun:

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

Sie müssen sich keine Gedanken über Browser-Inkonsistenzen oder andere Implementierungen machen, nur über Firefox. Vielen Dank!

BEARBEITEN: Sichtbar wird definiert, indem Anzeige nicht keine und Sichtbarkeit nicht ausgeblendet ist .

14
macguru2000 15 Nov. 2012 im 02:38

5 Antworten

Beste Antwort

Nein, gibt es nicht. Die CSS-Spezifikation definiert keinen :visible (oder verwandten) Selektor und AFAIK Firefox implementiert keine nicht standardmäßigen Pseudo-Selektoren.

Wenn Sie dies selbst implementieren möchten, beachten Sie, wie jQuery seinen :visible Selektor implementiert:

In jQuery 1.3.1 (und älter) war ein Element sichtbar, wenn seine CSS- "Anzeige" nicht "keine" war, seine CSS- "Sichtbarkeit" nicht "versteckt" war und sein Typ (wenn es eine Eingabe war) nicht "versteckt" war ". In jQuery 1.3.2 ist ein Element sichtbar, wenn seine vom Browser gemeldete OffsetWidth oder OffsetHeight größer als 0 ist.

Quelle: http://docs.jquery.com/Release:jQuery_1. 3.2 #: sichtbar.2F: hidden_Overhauled

9
David Wolever 14 Nov. 2012 im 22:46

Da es keine native Implementierung des: sichtbaren Pseudo-Selektors gibt, habe ich mich entschieden, CSS-Klassen zu verwenden, um meine Elemente auszublenden und anzuzeigen, sodass ich einfach nur nach dem Klassennamen anstatt nach der Sichtbarkeit suchen kann. So sieht mein Selektor jetzt aus:

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

Jetzt im Jahr 2016 können wir auch das versteckte HTML5-Attribut verwenden, sodass dieser Selektor auch funktionieren würde:

elem.querySelector('#list .list-item:not([hidden])');
18
macguru2000 13 Apr. 2016 im 18:23

Um Elemente zu finden, die nicht display:none sind, entspricht der CSS-Selektor :visible

:not([style='display:none'])

Sie können dasselbe für visibility:hidden tun und dann :not() Selektoren verketten, wenn Sie müssen.

Hier ist eine Geige.

Bearbeiten: Seien Sie vorsichtig mit Leerzeichen und anderen Satzzeichen. Wenn Sie diese Elemente später beispielsweise mit JQuery und hide() bearbeiten und dieselbe Funktion aufrufen müssen, müssen Sie :not([style="display: none;"]) mit Ihrem CSS-Selektor verketten.

5
iandllnghm 12 Feb. 2019 im 13:00

Überprüfen, ob das Element sichtbar ist, unterstützt alle gängigen Browser:

JQuery:

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

Vanilla JS:

function isVisible(elem) {return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0; }
1
Tomer Gal 18 Apr. 2016 im 17:07

Mit einfachem Javascript können Sie auch das Verhalten von jQuery einfach emulieren, indem Sie Ihre querySelector-Ergebnisse in ein Array verwandeln und es filtern:

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

Dadurch wird ein einfaches Array mit den Ergebnissen Ihres Selektors erstellt, das Sie filtern können als:

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

Oder sogar die restlichen Abfragebedingungen (item.style.visibility != "hidden" && item.style.opacity > 0 && ...).

Als Einzeiler:

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" } );
5
Javier Guerrero 18 Okt. 2017 im 10:52