Как проверить видимость элементов через javascript?
Мне интересен способ проверки отображения элемента: none style explicility (т.е. style = "display: none" ), имеет класс, который (или наследует) этот стиль, или один из его родителей hidden (и мой элемент наследует это)
Вариант 1:
<body><div><span style="display:none;">Some hidden text</span></div>
или
<body><div style="display:none;"><span>Some hidden text</span></div>
Случай 2:
SomeClass { display:none; }
<body><div class="SomeClass"><span>Some hidden text</span></div>
Спасибо,
Ответы
Ответ 1
Вы ищете одно решение для двух разных сценариев.
Первый сценарий - получение каскадного/вычисленного стиля для свойства css. См. этот ответ, как это сделать.
Второй сценарий - это обнаружение того, скрыты ли какие-либо из родителей элементов. Это требует пересечения и громоздки и медленны.
Вы можете принять решение описанное здесь (и используется jQuery/Sizzle с 1.3.2) и просто прочитайте размеры элемента:
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
Если он имеет размеры, то он виден в том смысле, что он занимает некоторое прямоугольное пространство (хотя и небольшое) в документе. Обратите внимание, что этот метод по-прежнему имеет некоторые недостатки для определенных элементов в некоторых браузерах, но должен работать в большинстве случаев.
Ответ 2
Это самый быстрый и простой способ определить, является ли элемент видимым.
function is_visible(e) {return e.offsetWidth > 0 || e.offsetHeight > 0;}
Ответ 3
Каждый случай должен иметь свою собственную проверку, и вам нужно знать идентификатор этого элемента. Сначала возьмите элемент (просто сделайте это, чтобы прочитать код):
var MyElementName = document.getElementById("MyElementName");
Затем выполните следующие проверки:
Случай 1:
if (MyElementName.style.display == "none")
Случай 2, глядя на родителя, сначала проверяя FF:
if ((MyElementName.previousSibling.nodeType == 3 )
&& (MyElementName.parentNode.nextSibling.style.display == "none"))
затем для других браузеров:
else (MyElementName.parentNode.style.display == "none")
Случай 3, найдите прикладной класс css:
if (MyElementName.className = "SomeClass")
Ответ 4
Вышеупомянутое решение подходит для этого сценария "невидимости":
display:none;
но он не подходит для этого:
visibility: hidden;
Чтобы включить тест для видимости: hidden; script можно изменить следующим образом:
Сначала создайте функцию, совместимую с кросс-браузером, чтобы получить нужный элемент, вычисленный стиль:
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-индекса
Также, вероятно, стоит отметить следующее относительно вышеупомянутой функции computedStyle():
- Конечно, он может использоваться для многих других целей, связанных с стилем, помимо проверки видимости.
- Я предпочел игнорировать: тестирование псевдо-стиля из-за неоднородной поддержки браузера, однако с незначительной модификацией функции это может быть включено, если это необходимо.
Ответ 5
Это то, что вы пытаетесь сделать?
function SomeClass()
{
if (document.getElementById("MY_DIV_ID").style.display == "none")
{
}
}