Проверить элемент CSS-дисплей с помощью JavaScript

Ответ 1

Элементы имеют свойство style, которое сообщит вам, что вы хотите, если стиль был объявлен встроенным или с JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

даст вам строковое значение.

Как сказано ниже, если display элемента наследуется или задается правилом CSS, вам нужно получить его вычисленный стиль:

return getComputedStyle(element, null).display;

Ответ 2

Если стиль был объявлен встроенным или с JavaScript, вы можете просто получить объект style:

return element.style.display === 'block';

В противном случае вам придется получить вычисленный стиль, и есть несогласованности браузера. IE использует простой объект currentStyle, но все остальные используют метод:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

null был необходим в Firefox версии 3 и ниже.

Ответ 3

Для jQuery, вы имеете в виду вот это?

$('#object').css('display');

Вы можете проверить это следующим образом:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

Ответ 4

Этот ответ не совсем то, что вы хотите, но он может быть полезен в некоторых случаях. Если вы знаете, что элемент имеет некоторые размеры при отображении, вы также можете использовать это:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

EDIT: Почему это может быть лучше, чем прямая проверка свойства CSS display? Потому что вам не нужно проверять все родительские элементы. Если какой-либо родительский элемент имеет display: none, его дети тоже скрыты, но все еще имеет element.style.display !== 'none'.

Ответ 5

да.

var displayValue = document.getElementById('yourid').style.display;

Ответ 6

Чтобы узнать, видно ли это с помощью обычного JavaScript, проверьте, является ли свойство display "none" (не проверяйте "блок", оно также может быть пустым или "inline" и все еще быть видимым):

var isVisible = (elt.style.display != "none");

Если вы используете jQuery, вы можете использовать это вместо:

var isVisible = $elt.is(":visible");

Ответ 7

Основной JavaScript:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

Ответ 8

Вы можете проверить это, например, с помощью jQuery:

$("#elementID").css('display');

Он вернет строку с информацией об отображаемом свойстве этого элемента.

Ответ 9

С чистым javascript вы можете проверить свойство style.display. С помощью jQuery вы можете использовать $('#id').css('display')