Можете ли вы проверить отображение CSS объекта с помощью JavaScript?

можно ли проверить, если CSS объекта display == block или none С помощью JavaScript?

9 53
javascript css

9 ответов:

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

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

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

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

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

если стиль был объявлен inline или с JavaScript, вы можете просто получить на

60

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

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

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

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

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

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

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

10

да.

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

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

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

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

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

Базовый JavaScript-Кода:

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

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

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

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

0

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

0