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 .
5 Antworten
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
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])');
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.
Ü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; }
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" } );