Свойство стиля display

Определение и использование

display Свойства устанавливают или возвращают тип отображения элемента.

Элементы HTML в основном являются «внутренними» или «блочными» элементами: у внутреннего элемента с обеих сторон есть плавающий контент. Блочный элемент заполняет целую строку, и с его левой или правой стороны не может быть отображен какой-либо контент.

display свойство также позволяет автору показывать или скрывать элемент. Оно подобно свойству visibility. Но если установлено display:none, оно скрывает весь элемент, а visibility:hidden означает, что содержимое элемента будет не видимо, но элемент сохранит свою исходную позицию и размер.

Совет:Если элемент является блочным элементом, также можно изменить его тип отображения с помощью свойства float.

См. также:

Уроки CSS:CSS Display и visibility

Руководство по CSS:Свойство display

Пример

Пример 1

Установка отображения div-элемента без отображения:

document.getElementById("myDIV").style.display = "none";

Попробуйте сами

Пример 2

Разница между свойствами display и visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Попробуйте сами

Пример 3

Переключение между скрытием и отображением элементов:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Попробуйте сами

Пример 4

Разница между "inline", "block" и "none":
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Попробуйте сами

Пример 5

Вернуть тип отображения элемента <p>:

alert(document.getElementById("myP").style.display);

Попробуйте сами

Грамматика

Вернуть атрибут display:

object.style.display

Установить атрибут display:

object.style.display = value

Значение атрибута

Значение Описание
block Элемент рендерится как блоковый элемент.
compact Элемент представлен как блочный или инлайн-элемент. Зависит от контекста.
flex Элемент представлен как эластичный фрейм блочного уровня. Новая функция CSS3.
inline Элемент представлен как инлайн-элемент. По умолчанию.
inline-block Элемент представлен как блоковый фрейм в инлайн-фрейме.
inline-flex Элемент представлен как инлайн-уровень эластичного фрейма. Новая функция CSS3.
inline-table Элемент представлен как инлайн-таблица (например, <table>), перед таблицей и после таблицы нет переноса строки.
list-item Элемент представлен как список.
marker

Этот значений устанавливает содержимое перед или после фрейма в виде маркера (marker)

Используется вместе с псевдоэлементами :before и :after. В противном случае это значение равно "inline".
none Элемент не отображается.
run-in Элемент представлен как блочный или инлайн-элемент. Зависит от контекста.
table Элемент представлен как блоковая таблица (block table) (например, <table>), перед таблицей и после таблицы есть перенос строки.
table-caption Элемент представлен как заголовок таблицы (например, <caption>).
table-cell Элемент представлен как ячейка таблицы (например, <td> и <th>).
table-column Элемент представлен как столбец ячеек (например, <col>).
table-column-group Элемент представлен как группа столбцов (например, <colgroup>).
table-footer-group Элемент представлен как строка нижнего колонтитула таблицы (например, <tfoot>).
table-header-group Элемент представлен как строка заголовка таблицы (например, <thead>).
table-row Элемент представлен как строка таблицы (например, <tr>).
table-row-group Элемент представлен как группа строк (например, <tbody>).
initial Этот атрибут устанавливается в его значение по умолчанию. См. initial.
inherit Этот атрибут наследуется от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: inline
Возвратное значение: Строка, представляющая собой тип отображения элемента.
Версия CSS: CSS1

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка