Die obige Lösung deckt dieses Szenario der "Unsichtbarkeit" ab:
display:none;
aber für diesen ist sie nicht geeignet:
visibility: hidden;
Um den Test auf Sichtbarkeit: versteckt einzubeziehen, kann das Skript wie folgt geändert werden...
Erstellen Sie zunächst eine browserübergreifende Funktion, um den berechneten Stil des gewünschten Elements zu erhalten:
computedStyle = function(vElement) {
return window.getComputedStyle?
?window.getComputedStyle(vElement,null)
:vElement.currentStyle; //IE 8 and less
}
Zweitens: Erstellen Sie die Funktion zum Testen der Sichtbarkeit
isVisible = function(vElement) {
return !(vElement.offsetWidth == 0 && vElement.offsetHeight == 0)
&& computedStyle(vElement).visibility != "hidden";
}
Schließlich verweisen Sie einfach auf die Funktion isVisible, wo immer sie benötigt wird, wie folgt:
if (isVisible(myElement)) {
alert('You can see me!');
} else {
alert('I am invisible ha ha!');
}
Nur ein Hinweis darauf, dass die aktuellen isVisible()-Tests eine Reihe von "Unsichtbarkeits"-Szenarien nicht berücksichtigen (die Tests könnten jedoch erweitert werden, um diese einzubeziehen). Hier sind ein paar Beispiele:
- wenn ein Element die gleiche Farbe wie die umgebende Farbe hat
- wenn ein Element sichtbar ist, aber physisch hinter einem anderen Element liegt, z. B. bei unterschiedlichen z-Index-Werten
Zu der oben genannten Funktion computedStyle() ist wahrscheinlich auch Folgendes zu bemerken:
- Neben der Prüfung der Sichtbarkeit kann es natürlich auch für viele andere stilbezogene Zwecke verwendet werden.
- Ich habe mich dafür entschieden, :pseudo style testing aufgrund der unzureichenden Browserunterstützung zu ignorieren, aber mit einer kleinen Änderung der Funktion könnte dies, falls gewünscht, einbezogen werden.
