Приведенное выше решение учитывает этот сценарий "невидимости":
display:none;
но это не подходит для этого:
visibility: hidden;
Для того, чтобы включить тест на видимость: скрыто; скрипт можно изменить следующим образом ...
Сначала создайте кросс-браузерную совместимую функцию, чтобы получить вычисляемый стиль желаемого элемента:
computedStyle = function(vElement) {
return window.getComputedStyle?
?window.getComputedStyle(vElement,null)
:vElement.currentStyle; //IE 8 and less
}
Во-вторых, создайте функцию для проверки видимости
isVisible = function(vElement) {
return !(vElement.offsetWidth == 0 && vElement.offsetHeight == 0)
&& computedStyle(vElement).visibility != "hidden";
}
Наконец, просто обращайтесь к функции isVisible там, где это необходимо, следующим образом:
if (isVisible(myElement)) {
alert('You can see me!');
} else {
alert('I am invisible ha ha!');
}
Просто обратите внимание, что текущие тесты isVisible () не учитывают ряд сценариев "невидимости" (однако я могу предположить, что тесты будут расширены, чтобы включить их). Вот несколько примеров:
- где элемент того же цвета, что и окружающий цвет
- где элемент виден, но физически за другим элементом, например. разные значения z-index
Также, вероятно, стоит отметить следующее относительно вышеупомянутой функции computedStyle ():
- Конечно, кроме проверки видимости, его можно использовать для многих других стилевых целей
- Я предпочел игнорировать: тестирование псевдо-стиля из-за нестабильной поддержки браузера, однако с незначительным изменением функции это можно было бы включить при желании.