Перевірте відображення елемента CSS за допомогою JavaScript

97

Чи можна перевірити CSS елемента display == blockчи noneза допомогою JavaScript?

javascript css

— Сет
джерело

114

Як зазначає 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 Qing

@Kai Потрійний рівний не робить примусу типу. Крокфорд пояснює, чому , у розділі, що називається " ===та !==оператори".

— sdleihssirhc

Це досить цікаво. Забавно, як щось подібне може просто не помітити після багатьох років програмування. Я завжди приймав припущення, що === суворо логічно. Добре знати.

— Kai Qing

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

14

Так, але я зробив це, тому що всі інші дали необроблену відповідь на javascript, тож, якщо він використовував jquery, але не вказував, тоді в публікації буде користь

— Кай Цін,

18

Ця відповідь не зовсім те, що ви хочете, але в деяких випадках може бути корисною. Якщо ви знаєте, що елемент має деякі розміри при відображенні, ви також можете використовувати це:

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

EDIT: Чому це може бути краще, ніж безпосередня перевірка властивості CSS display? Оскільки вам не потрібно перевіряти всі батьківські елементи. Якщо якийсь батьківський елемент має display: none, його діти також приховані, але все ще є element.style.display !== 'none'.

— Мартін Іржичка
джерело

Дійсно, це корисно.

— Jonatas Walker

7

так.

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

— Віктор
джерело

5

Основний JavaScript:

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

— Чугворт
джерело

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');

Він поверне рядок з інформацією про властивість відображення цього елемента.

— Марек Тухальський
джерело