Извлечение свойства отображения элемента DOM: раскрытие истинного значения

Приведенный HTML-код представляет абзац и привязку с различным отображением стили. Однако получение этих стилей через свойство style приводит к неожиданным пустым строкам. Почему это так и как можно точно получить свойство display?

Загадка пустой строки

Первоначальная путаница возникает из-за того, что .style.* свойства сопоставляются непосредственно с атрибутом стиля, а не с примененным стилем. Это означает, что вы, по сути, проверяете объявление встроенного стиля, который не всегда может отражать вычисленный стиль.

Решение: getComputedStyle

Чтобы получить фактически примененный стиль , включая унаследованные свойства, вам необходимо использовать метод getComputedStyle. Этот метод принимает элемент DOM в качестве аргумента и возвращает объект CSSStyleDeclaration, содержащий вычисленные значения стиля.

Предоставленный код можно изменить для использования getComputedStyle следующим образом:

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);

Теперь первое оповещение будет отображать «нет» для тега привязки, второе оповещение будет отображать «блок» для элемента абзаца, а третье оповещение будет отображаться «нет» после намеренной настройки отображения. Это точно отражает вычисленные стили отображения элементов.

Альтернативный подход: переключение классов

Вместо того, чтобы полагаться на свойство display, вы можете рассмотреть возможность использования имен классов для переключения видимость элементов. Отделив представление от логики, вы можете упростить свой код и сделать его менее подверженным проблемам, связанным со стилем.