Как проверить видимость элементов через 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")
  {

  }
}