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

Question

Можно ли проверить, использует ли элемент CSS display == block или none с помощью JavaScript?

Answer 1

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

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

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

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

return getComputedStyle(element, null).display;

Answer 2

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

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

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

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

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

Answer 3

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

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

Вы можете проверить это так:

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

Answer 4

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

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

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

Answer 5

да.

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

Answer 6

Базовый JavaScript:

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

Answer 7

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

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

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

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

Answer 8

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

Answer 9

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

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

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