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

97

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

javascript css

— Сет
источник

115

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

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

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

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

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

— Дэн Дэвис Брэкетт
источник

2

Что делать, если в нем нет встроенного css?

— jscripter

5

Для простоты, почему бы просто не получить вычисляемый стиль?

— cade galt

12

что есть currentStyle? никогда не слышал об этом, также проверил document.body.currentStyleи ничего не получил (не удивился)

— vsync

1

@vsync (и на будущее) Согласно MDN , это собственность старой версии Internet Explorer.

— user202729

2

Спасибо за комментарии. Ответ обновлен для современной сети.

— Дэн Дэвис Брэкетт

78

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

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

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

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

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

— sdleihssirhc
источник

не должно ли это быть == в этом случае?

— Кай Цин

@Kai Тройное равенство не выполняет приведение типов. Крокфорд объясняет почему в разделе « Операторы ===и !==».

— sdleihssirhc 01

Это довольно интересно. Забавно, что подобное может просто ускользнуть от внимания после стольких лет программирования. Я всегда придерживался мнения, что === было строго логическим. Хорошо знать.

— Кай Цин

3

@Kai: Нет проблем с использованием, ===а не ==здесь, но в равной степени нет и преимуществ. Оба операнда гарантированно являются строками, поэтому оба оператора выполняют одни и те же действия.

— Тим Даун

1

@hippietrail И почти 10 лет спустя (2019-10-27) проблемы все еще существуют. Проверьте, что сообщает MDN

— Фелипе Аламеда A

37

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

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

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

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

— Кай Цин
источник

9

Избегайте чрезмерного усложнения ответа. Я знаю, что jQuery становится чем-то вроде стандарта, но нет причин добавлять всю структуру только для проверки стиля отображения элемента.

— zzzzBov 01

14

Да, но я сделал это, потому что все остальные дали необработанный ответ javascript, поэтому, если он использовал jquery, но не указал, тогда в сообщении было бы какое-то использование

— Кай Цин

18

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

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

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

— Мартин Йиржичка
источник

Действительно, это полезно.

— Джонатас Уокер

7

да.

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

— Виктор
источник

5

Базовый JavaScript:

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

— Chugworth
источник

2

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

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

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

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

— MarkXA
источник

0

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

— Джойс Бабу
источник

-1

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

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

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

— Марек Тухальски
источник