Проверить отображение CSS элемента с помощью JavaScript

Можно ли проверить, есть ли у элемента CSS display == blockили noneJavaScript?

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

return window.getComputedStyle(element, null).display;

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

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

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

Если стиль был объявлен встроенным или с помощью JavaScript, вы можете просто добраться до styleобъекта:

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

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

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

nullТребуется в Firefox версии 3 и ниже.

Что вы имеете в виду для jQuery?

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

Проверить это можно так:

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

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

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

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

да.

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

Базовый JavaScript:

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

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

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

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

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

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

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

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

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